:root {
    --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1rem' height='1rem' viewBox='0 0 24 24'%3E%3Cpath fill='%238b4efa' d='M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.3 7.3 0 0 0 0 1.35l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68m-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5'/%3E%3C/svg%3E");
    --settings-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1rem' height='1rem' viewBox='0 0 24 24'%3E%3Cpath fill='%23ceb6fc' d='M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.3 7.3 0 0 0 0 1.35l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68m-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5'/%3E%3C/svg%3E");
    --personal-info-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 24 24'%3E%3Cpath fill='%23ceb6fc' d='M11 9c0 1.66-1.34 3-3 3s-3-1.34-3-3s1.34-3 3-3s3 1.34 3 3m3 11H2v-2c0-2.21 2.69-4 6-4s6 1.79 6 4M7 9c0 .55.45 1 1 1s1-.45 1-1s-.45-1-1-1s-1 .45-1 1m-3 9h8c0-1.1-1.79-2-4-2s-4 .9-4 2m18-6v2h-9v-2m9-4v2h-9V8m9-4v2h-9V4Z'/%3E%3C/svg%3E");
    --personal-info-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 24 24'%3E%3Cpath fill='%238b4efa' d='M11 9c0 1.66-1.34 3-3 3s-3-1.34-3-3s1.34-3 3-3s3 1.34 3 3m3 11H2v-2c0-2.21 2.69-4 6-4s6 1.79 6 4M7 9c0 .55.45 1 1 1s1-.45 1-1s-.45-1-1-1s-1 .45-1 1m-3 9h8c0-1.1-1.79-2-4-2s-4 .9-4 2m18-6v2h-9v-2m9-4v2h-9V8m9-4v2h-9V4Z'/%3E%3C/svg%3E");
    --documents-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 256 256'%3E%3Cg fill='%238b4efa' %3E%3Cpath d='M208 72v112a8 8 0 0 1-8 8h-24v-88l-40-40H80V40a8 8 0 0 1 8-8h80Z' opacity='.2'/%3E%3Cpath d='m213.66 66.34l-40-40A8 8 0 0 0 168 24H88a16 16 0 0 0-16 16v16H56a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h112a16 16 0 0 0 16-16v-16h16a16 16 0 0 0 16-16V72a8 8 0 0 0-2.34-5.66M168 216H56V72h76.69L168 107.31zm32-32h-16v-80a8 8 0 0 0-2.34-5.66l-40-40A8 8 0 0 0 136 56H88V40h76.69L200 75.31Zm-56-32a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8'/%3E%3C/g%3E%3C/svg%3E");    
    --documents-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 256 256'%3E%3Cg fill='%23ceb6fc' %3E%3Cpath d='M208 72v112a8 8 0 0 1-8 8h-24v-88l-40-40H80V40a8 8 0 0 1 8-8h80Z' opacity='.2'/%3E%3Cpath d='m213.66 66.34l-40-40A8 8 0 0 0 168 24H88a16 16 0 0 0-16 16v16H56a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h112a16 16 0 0 0 16-16v-16h16a16 16 0 0 0 16-16V72a8 8 0 0 0-2.34-5.66M168 216H56V72h76.69L168 107.31zm32-32h-16v-80a8 8 0 0 0-2.34-5.66l-40-40A8 8 0 0 0 136 56H88V40h76.69L200 75.31Zm-56-32a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8'/%3E%3C/g%3E%3C/svg%3E");
    --relationship-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 32 32'%3E%3Cpath fill='%238b4efa' d='M26 6a3.996 3.996 0 0 0-3.858 3H17.93A7.996 7.996 0 1 0 9 17.93v4.212a4 4 0 1 0 2 0v-4.211a7.95 7.95 0 0 0 3.898-1.62l3.669 3.67A3.95 3.95 0 0 0 18 22a4 4 0 1 0 4-4a3.95 3.95 0 0 0-2.019.567l-3.67-3.67A7.95 7.95 0 0 0 17.932 11h4.211A3.993 3.993 0 1 0 26 6M12 26a2 2 0 1 1-2-2a2 2 0 0 1 2 2m-2-10a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6m14 6a2 2 0 1 1-2-2a2 2 0 0 1 2 2m2-10a2 2 0 1 1 2-2a2 2 0 0 1-2 2'/%3E%3C/svg%3E");
    --relationship-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 32 32'%3E%3Cpath fill='%23ceb6fc' d='M26 6a3.996 3.996 0 0 0-3.858 3H17.93A7.996 7.996 0 1 0 9 17.93v4.212a4 4 0 1 0 2 0v-4.211a7.95 7.95 0 0 0 3.898-1.62l3.669 3.67A3.95 3.95 0 0 0 18 22a4 4 0 1 0 4-4a3.95 3.95 0 0 0-2.019.567l-3.67-3.67A7.95 7.95 0 0 0 17.932 11h4.211A3.993 3.993 0 1 0 26 6M12 26a2 2 0 1 1-2-2a2 2 0 0 1 2 2m-2-10a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6m14 6a2 2 0 1 1-2-2a2 2 0 0 1 2 2m2-10a2 2 0 1 1 2-2a2 2 0 0 1-2 2'/%3E%3C/svg%3E");
    --experience-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 24 24'%3E%3Cpath fill='%238b4efa' d='M21 11.11V7a2 2 0 0 0-.58-1.41A1.87 1.87 0 0 0 19 5h-4V3a1.9 1.9 0 0 0-.58-1.42A1.9 1.9 0 0 0 13 1H9a1.9 1.9 0 0 0-1.42.58A1.9 1.9 0 0 0 7 3v2H3a1.87 1.87 0 0 0-1.42.59A2 2 0 0 0 1 7v11a2 2 0 0 0 .58 1.41A1.87 1.87 0 0 0 3 20h7.26A7 7 0 1 0 21 11.11M9 3h4v2H9M3 18V7h16v2.68A6.84 6.84 0 0 0 16 9a7 7 0 0 0-7 7a7 7 0 0 0 .29 2M19 20a5 5 0 0 1-6 0a4.94 4.94 0 0 1-2-4a5 5 0 0 1 5-5a4.94 4.94 0 0 1 3 1a5 5 0 0 1 0 8m-4-7h1.5v2.82l2.44 1.41l-.75 1.3L15 16.69z'/%3E%3C/svg%3E");
    --experience-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 24 24'%3E%3Cpath fill='%23ceb6fc' d='M21 11.11V7a2 2 0 0 0-.58-1.41A1.87 1.87 0 0 0 19 5h-4V3a1.9 1.9 0 0 0-.58-1.42A1.9 1.9 0 0 0 13 1H9a1.9 1.9 0 0 0-1.42.58A1.9 1.9 0 0 0 7 3v2H3a1.87 1.87 0 0 0-1.42.59A2 2 0 0 0 1 7v11a2 2 0 0 0 .58 1.41A1.87 1.87 0 0 0 3 20h7.26A7 7 0 1 0 21 11.11M9 3h4v2H9M3 18V7h16v2.68A6.84 6.84 0 0 0 16 9a7 7 0 0 0-7 7a7 7 0 0 0 .29 2M19 20a5 5 0 0 1-6 0a4.94 4.94 0 0 1-2-4a5 5 0 0 1 5-5a4.94 4.94 0 0 1 3 1a5 5 0 0 1 0 8m-4-7h1.5v2.82l2.44 1.41l-.75 1.3L15 16.69z'/%3E%3C/svg%3E");
    --education-and-skills-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 32 32'%3E%3Cpath fill='%238b4efa' d='M26 30h-2v-3a5.006 5.006 0 0 0-5-5h-6a5.006 5.006 0 0 0-5 5v3H6v-3a7.01 7.01 0 0 1 7-7h6a7.01 7.01 0 0 1 7 7zM5 6a1 1 0 0 0-1 1v9h2V7a1 1 0 0 0-1-1'/%3E%3Cpath fill='%238b4efa' d='M4 2v2h5v7a7 7 0 0 0 14 0V4h5V2Zm7 2h10v3H11Zm5 12a5 5 0 0 1-5-5V9h10v2a5 5 0 0 1-5 5'/%3E%3C/svg%3E");
    --education-and-skills-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 32 32'%3E%3Cpath fill='%23ceb6fc' d='M26 30h-2v-3a5.006 5.006 0 0 0-5-5h-6a5.006 5.006 0 0 0-5 5v3H6v-3a7.01 7.01 0 0 1 7-7h6a7.01 7.01 0 0 1 7 7zM5 6a1 1 0 0 0-1 1v9h2V7a1 1 0 0 0-1-1'/%3E%3Cpath fill='%23ceb6fc' d='M4 2v2h5v7a7 7 0 0 0 14 0V4h5V2Zm7 2h10v3H11Zm5 12a5 5 0 0 1-5-5V9h10v2a5 5 0 0 1-5 5'/%3E%3C/svg%3E");
    --placement-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 24 24'%3E%3Cpath fill='%238b4efa' d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m-1.5 15h-3v-2h3zm0-4h-3v-2h3zm0-4h-3V7h3zm4.5 8h-3v-2h3zm0-4h-3v-2h3zm0-4h-3V7h3z'/%3E%3C/svg%3E");
    --placement-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 24 24'%3E%3Cpath fill='%23ceb6fc' d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m-1.5 15h-3v-2h3zm0-4h-3v-2h3zm0-4h-3V7h3zm4.5 8h-3v-2h3zm0-4h-3v-2h3zm0-4h-3V7h3z'/%3E%3C/svg%3E");
    --job-details-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 24 24'%3E%3Cpath fill='%238b4efa' d='M21.04 12.13c.14 0 .27.06.38.17l1.28 1.28c.22.21.22.56 0 .77l-1 1l-2.05-2.05l1-1c.11-.11.25-.17.39-.17m-1.97 1.75l2.05 2.05L15.06 22H13v-2.06zM10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2l-2 2V8H4v11h7v2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2m4 4V4h-4v2z'/%3E%3C/svg%3E");
    --job-details-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6rem' viewBox='0 0 24 24'%3E%3Cpath fill='%23ceb6fc' d='M21.04 12.13c.14 0 .27.06.38.17l1.28 1.28c.22.21.22.56 0 .77l-1 1l-2.05-2.05l1-1c.11-.11.25-.17.39-.17m-1.97 1.75l2.05 2.05L15.06 22H13v-2.06zM10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2l-2 2V8H4v11h7v2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2m4 4V4h-4v2z'/%3E%3C/svg%3E");
    --skills-and-requirements-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6em' viewBox='0 0 16 16'%3E%3Cpath fill='%238b4efa' fill-rule='evenodd' d='M3 2.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h5.25a.75.75 0 0 1 0 1.5H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6.25a.75.75 0 0 1-1.5 0V3a.5.5 0 0 0-.5-.5zm12.28 8.72a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-1-1a.75.75 0 1 1 1.06-1.06l.47.47l1.97-1.97a.75.75 0 0 1 1.06 0M4.75 4a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5zM4 8a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 4 8m.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    --skills-and-requirements-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6rem' height='1.6em' viewBox='0 0 16 16'%3E%3Cpath fill='%23ceb6fc' fill-rule='evenodd' d='M3 2.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h5.25a.75.75 0 0 1 0 1.5H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6.25a.75.75 0 0 1-1.5 0V3a.5.5 0 0 0-.5-.5zm12.28 8.72a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-1-1a.75.75 0 1 1 1.06-1.06l.47.47l1.97-1.97a.75.75 0 0 1 1.06 0M4.75 4a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5zM4 8a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 4 8m.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E")
}

.entity-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    max-width: var(--md);
    min-width: var(--sm);
}

.entity-matches-table,
.entity-database,
.entity-form {
    opacity: 0;
    transform: translateX(-10px);
    &.entry {
        opacity: 1;
        transform: translateX(0);
        transition: opacity ease-out 250ms, transform ease-out 250ms;
    }
}

.entity-database {
   .grid-container {
        --ag-selected-row-background-color: rgba(98, 61, 165, .2);
        --ag-range-selection-border-color: #2196f3;
        --ag-header-background-color: #ededed;
        --ag-accent-color: #2196f3;
        --ag-pinned-column-border: transparent;
        --ag-checkbox-checked-background-color: var(--mui-palette-primary-main);
    }
        .ag-pinned-left-cols-container .ag-row .ag-cell:first-child {
            position: relative;
        }

        .ag-pinned-left-cols-container .ag-row.row-not-validated .ag-cell:first-child::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 5px;
            background-color: #f9a825;
        }
}

[data-dark] {
    .entity-database {
        .grid-container {
            --ag-selected-row-background-color: rgba(98, 61, 165, .5);
            --ag-range-selection-border-color: #2196f3;
            --ag-header-background-color: #212121;
            --ag-accent-color: #2196f3;
        }
        .ag-pinned-left-cols-container .ag-row.row-not-validated .ag-cell:first-child::before {
            background-color: #f9a825;
        }
    }
}

.personal-details-group {
    padding-top: 4rem;
    position: relative;
    &::before {
        content: "Personal Details";
        position: absolute;
        top: 15px;
        left: 55px;
        font-size: 1.2rem;
        color: var(--mui-palette-primary-main);
        font-weight: bold;
    }
    &::after {
        position: absolute;
        top: 15px;        
        content: var(--personal-info-icon-light)
    }
    flex-direction: row;
    gap: 2px;
    >* {
        flex: 1 1 0;
    }
}

.documents-group {
    padding-top: 4rem;
    position: relative;
    &::before {
        content: "Documents";
        position: absolute;
        top: 15px;
        left: 55px;
        font-size: 1.2rem;
        color: var(--mui-palette-primary-main);
        font-weight: bold;
    }
    &::after {
        position: absolute;
        top: 15px;        
        content: var(--documents-icon-light)
    }
    flex-direction: row;
    gap: 2px;
    >* {
        flex: 1 1 0;
    }
}

.relationship-group {
    padding-top: 4rem;
    position: relative;
    &::before {
        content: "Employment Coordination";
        position: absolute;
        top: 15px;
        left: 55px;
        font-size: 1.2rem;
        color: var(--mui-palette-primary-main);
        font-weight: bold;
    }
    &::after {
        position: absolute;
        top: 15px;        
        content: var(--relationship-icon-light)
    }
    flex-direction: row;
    gap: 2px;
    >* {
        flex: 1 1 0;
    }
}

.experience-group {
    padding-top: 4rem;
    position: relative;
    &::before {
        content: "Experience";
        position: absolute;
        top: 15px;
        left: 55px;
        font-size: 1.2rem;
        color: var(--mui-palette-primary-main);
        font-weight: bold;
    }
    &::after {
        position: absolute;
        top: 15px;        
        content: var(--experience-icon-light)
    }
    flex-direction: row;
    gap: 2px;
    >* {
        flex: 1 1 0;
    }
}

.education-and-skills-group {
    padding-top: 4rem;
    position: relative;
    &::before {
        content: "Skills and Education";
        position: absolute;
        top: 15px;
        left: 55px;
        font-size: 1.2rem;
        color: var(--mui-palette-primary-main);
        font-weight: bold;
    }
    &::after {
        position: absolute;
        top: 15px;        
        content: var(--education-and-skills-icon-light)
    }
    flex-direction: row;
    gap: 2px;
    >* {
        flex: 1 1 0;
    }
    .education-field {
        .array-field-items {
            >div {
                display: flex;
                margin-bottom: 25px;
                flex-direction: row;
                flex-wrap: wrap;
                .form-field {
                    flex: 0 0 calc(33.333% - 10px);
                }
            }
        }
    }
    
    .certifications-array-field-items {
        gap: 32px;
    }
}

.placement-group {
    padding-top: 4rem;
    position: relative;
    &::before {
        content: "Placement Details";
        position: absolute;
        top: 15px;
        left: 55px;
        font-size: 1.2rem;
        color: var(--mui-palette-primary-main);
        font-weight: bold;
    }
    &::after {
        position: absolute;
        top: 15px;        
        content: var(--placement-icon-light)
    }
    flex-direction: row;
    gap: 2px;
    >* {
        flex: 1 1 0;
    }
}

.job-details-group {
    padding-top: 4rem;
    position: relative;
    &::before {
        content: "Job Details";
        position: absolute;
        top: 15px;
        left: 55px;
        font-size: 1.2rem;
        color: var(--mui-palette-primary-main);
        font-weight: bold;
    }
    &::after {
        position: absolute;
        top: 15px;        
        content: var(--job-details-icon-light)
    }
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2px;
    >* {
        flex: 1 1 0;
    }
}

.job-details-group > .form-field.job_description-field,
.job-details-group > .form-field.job_type-field,
.job-details-group > .form-field.job_location-field {
  flex: 0 0 100%;
}

.skills-and-requirements-group {
    padding-top: 4rem;
    position: relative;
    &::before {
        content: "Job Requirements";
        position: absolute;
        top: 15px;
        left: 55px;
        font-size: 1.2rem;
        color: var(--mui-palette-primary-main);
        font-weight: bold;
    }
    &::after {
        position: absolute;
        top: 15px;        
        content: var(--skills-and-requirements-icon-light)
    }
    flex-direction: row;
    gap: 2px;
    >* {
        flex: 1 1 0;
    }
}

[data-dark] {
    div.personal-details-group::after {
        content: var(--personal-info-icon-dark)
    }
    div.documents-group::after {
        content: var(--documents-icon-dark);
    }
    div.relationship-group::after {
        content: var(--relationship-icon-dark);
    }
    div.experience-group::after {
        content: var(--experience-icon-dark)
    }
    div.education-and-skills-group::after {
        content: var(--education-and-skills-icon-dark)
    }
    div.placement-group::after {
        content: var(--placement-icon-dark)
    }
    div.job-details-group::after {
        content: var(--job-details-icon-dark)
    }
    div.skills-and-requirements-group::after {
        content: var(--skills-and-requirements-icon-dark)
    }
}

.gender-field.radio-type {
    .radio-group {
        flex-direction: row;
        gap: 1rem;
        label {
            gap: 0.25rem;
        }
    }
}

.checkbox-type label {
    gap: 0.25rem;
}
.candidates .entity-form {
    min-width: var(--md);
    .personal-details-group {
        padding-top: 2.4rem;
        position: relative;
        &::before {
            content: "Personal Details";
            position: absolute;
            top: 0;
            font-size: 1rem;;
            color: currentColor;
            color: var(--mui-palette-primary-main);
            font-weight: bold;
        }
        flex-direction: row;
        gap: 2px;
        >* {
            flex: 1 1 0;
        }
    }
    .experience-group {
        flex-direction: row;
        gap: 2px;
        >* {
            flex: 1 1 0;
        }
    }
    .ungrouped-group {
        display: flex;
        gap: 1rem;
        flex-direction: column;
    }
    .skills-field {
        .field-item {
            gap: 1rem;
        }
    }
    
}

.MuiChip-root {
  &.chip-is_completed-notValidated, &.chip-status-closed {
    background-color: transparent;
    color: #f57c00;
    border-color: #ef6c00;
    border-radius: 6px;
    font-weight: bold;
    text-transform: capitalize;
    width: auto;
    height: 20px;
    & .MuiChip-label {
        padding: 4px;
    }
  }

  &.chip-is_completed-validated, &.chip-status-open {
    background-color: transparent;
    border-color: #8bc34a;
    width: auto;
    color: #4caf50;
    border-radius: 6px;
    font-weight: bold;
    text-transform: capitalize;
    height: 20px;
    & .MuiChip-label {
        padding: 4px;
    }
  }
  
  &.chip-status-filled {
    background-color: #40a3b433;
    color: #2AADB4;
    border-color: #2AADB4;
  }

  &.chip-is_completed-incomplete {
    background-color: #b4ac4033;
    color: #92901f;
    border-color: #92901f;
  }
}

/* targets dark mode */
[data-dark] {
    .table-skeleton {
        .table-head {
            background-color: inherit;
        }
    }
    .MuiChip-root {
        &.chip-is_completed-validated,
        &.chip-status-open {
            background-color: transparent;
            color: #8bc34a;
        }
        &.chip-is_completed-notValidated,
        &.chip-status-closed {
            background-color: transparent;
            color: #fbc02d;
            border-color: #f9a825;
        }
    }
}

/* targets light mode */
@media (prefers-color-scheme: light) {
    .table-skeleton {
        .table-head {
            background-color: inherit;
        }
    }
}

/* targets both */
.table-skeleton {
    .table-head {
        background-color: inherit;
    }
}

.experience-array-field-items .field-item {
    display: flex;
    flex-wrap: wrap;
}

.experience-array-field-items .field-item .form-field[class*="-responsibilities-field"] {
    flex: 1 0 100%;
    width: 100%;
}

.experience-array-field-items .field-item .delete-button {
    margin-left: auto;
}


.match-params-group {
    .form-field {
        .fields-field-item {
            display: flex;
            flex-direction: row;
            margin-top: 5px;
        }
    }
}


.match-filters-group {
    .form-field {
        .filters-field-item {
            .filters-status-field {
                display: none;
            }
            .filters-is_completed-field {
                display: none;
            }
        }
    }
}

.match-filters-jobSeekers-group {
    display: none !important;
}

.ag-paging-row-summary-panel {
    display: none;
}

.ag-horizontal-left-spacer, .ag-horizontal-right-spacer {
    height: 0;
}

.entity-layout-root {
    .back-to-top-button {
        opacity: 0.5;
        transition: opacity 0.3s ease-in-out;
    }

    .back-to-top-button:hover {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.MuiDrawer-root {
    .profile-menu-button:hover::after {
        content: var(--settings-icon);
        opacity: 0;
        animation: fadeIn 0.3s ease-in-out forwards;
    }
}

[data-dark] {
    .MuiDrawer-root {
        .profile-menu-button:hover::after {
            content: var(--settings-icon-dark);
        }
    }
}