/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); */
:root {
    --ibgmain: #EE3D96;
    --light-pink: #FDB9FF;
    --pink: #ED3D96;
    --light-grey: #e9e6e2;
    --medium-gray: #f6f6f6;
    --panel-gray: #f3f3f3;
    --panel-gray-light: #fbfbfb;
    --dark-grey: #989088;
    --black: #000000;
    --white: #ffffff;
    --red: #D80818;
    --yellow: #ffb400;
    --orange: #ff6f00;
    --green: #1BC47D;
    --webpackaging-blue: #41A7CA;
    --gradient-red-pink: linear-gradient(90deg, var(--red) 0%, var(--pink) 48%, var(--light-pink) 100%);
    --gradient-pink-red: linear-gradient(270deg, var(--red) 0%, var(--pink) 48%, var(--light-pink) 100%);
    --gradient-light-pink-red: linear-gradient(90deg, #FFB9FF 54.33%, #FF1B09 100%);
    /* Light mode content variables */
    --content-bg: #ffffff;
    --content-text: #000000;
    --content-text-secondary: #444444;
    --content-border: #d3d3d3;
    --content-surface: #F5F5F5;
    --content-surface-hover: #e9e9e9;
    --content-input-bg: #ffffff;
    --content-table-header: #f3f3f3;
    --content-input-disabled-bg: #e9ecef;
    --content-input-disabled-text: #6c757d;
    --content-btn-bg: #222222;
    --content-btn-text: #ffffff;
    --content-btn-hover: #000000;
    --outline: #000000;
    --outline-inv: #ffffff;
}

html {
    font-family: 'Poppins', Arial, sans-serif;
    overflow-x: hidden;
    font-size: 10px;
    font-weight: 400;
    scroll-behavior: smooth;
}

/* Dark mode variables */
    html.dark {
        --content-bg: #353535;
        /*--content-text: #e5e5e5;*/
        --content-text: #ffffff;
        --content-text-secondary: #b0b0b0;
        --content-border: #909090;
        --content-surface: #2a2a2a;
        --content-surface-hover: #353535;
        --content-input-bg: #393939;
        --content-table-header: #393939;
        --content-input-disabled-bg: #333333;
        --content-input-disabled-text: #999999;
        --content-btn-bg: #e0e0e0;
        --content-btn-text: #1a1a1a;
        --content-btn-hover: #ffffff;
        --outline: #ffffff;
        --outline-inv: #000000;
    }
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    background-color: var(--content-bg);
    color: var(--content-text);
    font-size: 1.4rem;
}
ul {
    margin-left: 16px;
}
a {
    color: var(--ibgmain);
}
input, select, textarea {
    background-color: var(--content-input-bg);
    color: var(--content-text);
    border-color: var(--content-border);
}


button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
}

button, input, select, textarea, input::placeholder {
        font-family: 'Poppins', Arial, sans-serif;
    }

.no-data {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    background: var(--content-surface);
    border-radius: 4px;
    font-size: 14px;
    font-style: italic;
    color: var(--content-text-secondary);
    font-weight: 400;
    margin-bottom: 16px;
}

.hidden {
    display: none !important;
}

.semi-bold{
    font-weight: 600 !important;
}


/*====Main Pink Headers on details pages e.g. Entity, Factory, Product ====*/
.subtitle-std, .info-section h2 {
    color: var(--pink);
    margin: 0 0 15px 0;
    padding-bottom: 5px;
    border-bottom: 1.5px solid var(--pink);
    font-weight: 800;
    font-size: 30px;
    text-transform: capitalize;
}

    @media (max-width: 600px) {
        .info-section h2 {
            font-size: 24px;
        }
    }


/*====tables====*/
@media (max-width: 1024px) {
    .table-container {
        overflow-x: auto;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--content-bg);
    border-radius: 8px;
    overflow: visible;
    margin-bottom: 20px;
    font-family: 'Arial', sans-serif;
    table-layout: auto;
}

    .data-table thead {
        background: var(--content-table-header);
        color: var(--content-text);
        height: 56px;
    }

    .data-table th.table-header {
        font-size: 12px;
        font-weight: 600;
        color: var(--content-text);
        background: transparent;
        text-transform: uppercase;
        padding-top: 10px;
        padding-bottom: 12px;
        vertical-align: middle;
        font-family: 'Poppins', Arial, sans-serif;
        white-space: nowrap;
    }

    .data-table th, .data-table td {
        padding: 10px;
        text-align: left;
        font-size: 14px;
        border: none;
        color: var(--content-text);
        max-width: 150px;
        word-wrap: break-word;
    }

    .data-table td.capabilities,
    .data-table th.capabilities {
        white-space: normal;
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: table-cell;
    }

    .data-table td.options,
    .data-table th.options {
        white-space: normal;
        overflow: visible;
        position: relative;
    }

            
    .data-table th:last-child, .data-table td:last-child {
        width: 5%;
        text-align: center;
    }

    .data-table th.table-header a{
        color: var(--content-text);
    }

    .data-table tr {
        border-bottom: #F5F5F5 solid 1px;
    }

    .dark .data-table tr {
        border-bottom: #F5F5F5 solid 1px;
    }

        .data-table tr:last-child, .dark .data-table tr:last-child {
            border-bottom: none;
        }

.sort-arrow{
    margin-left: 10px;
}

.actions-cell {
    position: relative;
    text-align: center;
}

/* ---------- Color Classes for Spans ---------- */
.green {
    color: var(--green);
    font-weight: 600;
}

.yellow {
    color: var(--yellow);
    font-weight: 600;
}

.orange {
    color: var(--orange);
    font-weight: 600;
}

.red {
    color: var(--pink);
    font-weight: 600;
}

.gray,
.grey {
    color: var(--dark-grey);
    font-weight: 600;
}



/*===dialog e.g. add document, add site ===*/
.dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.dialog {
    background: var(--content-bg);
    padding: 40px 48px 36px 48px;
    max-width: 540px;
    width: 100%;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

.dark .dialog {
    background: #393939;
}
    .dialog p.title, .dialog-title, .dialog h2 {
        font-size: 30px;
        font-weight: 600;
        color: var(--outline);
    }
    .dialog p.subtitle, .dialog-subtitle {
        font-size: 20px;
        color: var(--content-text-secondary);
        margin: 0 0 22px 0;
        line-height: 1.5;
    }

.dialog ::deep form p {
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 14px;
}

    .dialog label, .dialog .label {
        font-size: 14px;
        color: var(--outline);
        font-weight: 400 !important;
        margin-bottom: 8px;
        display: block;
    }
    .dialog select, .dialog .select {
        width: 100%;
        padding: 14px 16px;
        border: 1.5px solid var(--content-border);
        border-radius: 7px;
        font-size: 12px;
        background: var(--content-input-bg);
        color: var(--outline);
        margin-bottom: 28px;
        margin-top: 2px;
        appearance: none;
        outline: none;
        box-sizing: border-box;
        transition: border 0.2s;
    }
    .dialog select:focus, .dialog .select:focus {
        border-color: var(--pink);
    }
    .dialog .button-container, .dialog .dialog-buttons {
        display: flex;
        justify-content: flex-end;
        gap: 18px;
        margin-top: 18px;
    }

.dialog .cancel-button, .dialog .ok-button, .dialog .continue-button, .dialog .save-button {
    padding: 5px 34px;
    border: 1px solid var(--black);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.dialog .save-button {
    background: var(--black);   
    color: var(--white);    
}
    .dialog .save-button:hover {
        background: var(--white);
        color: var(--black);
    }
    .dialog .save-button span[class^="icon-"] {
        width: 14px;
        height: 14px;
        filter: brightness(0) invert(1);
    }
    .dialog .save-button:hover span[class^="icon-"] {
        filter: brightness(0);
    }

.dark .dialog .save-button span[class^="icon-"] {
    filter: brightness(0) invert(1);
}

.dark .dialog .save-button:hover span[class^="icon-"] {
    filter: brightness(0);
}

.dialog .cancel-button {
    background-color: transparent;
    color: var(--content-text);
}
    .dialog .cancel-button:hover {
        background: var(--content-text);
        color: var(--outline-inv);
    }

.dialog .close-button {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM6.28042 5.21967C5.98752 4.92678 5.51265 4.92678 5.21976 5.21967C4.92687 5.51256 4.92687 5.98744 5.21976 6.28033L8.93938 9.99996L5.21967 13.7197C4.92678 14.0126 4.92678 14.4874 5.21967 14.7803C5.51256 15.0732 5.98744 15.0732 6.28033 14.7803L10 11.0606L13.7197 14.7803C14.0126 15.0732 14.4875 15.0732 14.7804 14.7803C15.0733 14.4874 15.0733 14.0126 14.7804 13.7197L11.0607 9.99996L14.7803 6.28034C15.0732 5.98745 15.0732 5.51257 14.7803 5.21968C14.4874 4.92679 14.0126 4.92679 13.7197 5.21968L10 8.9393L6.28042 5.21967Z' fill='black'/%3E%3C/svg%3E");
    border: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(.9);
    cursor: pointer;
    transition: transform 0.18s, color 0.18s;
}

.dark .dialog .close-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM6.28042 5.21967C5.98752 4.92678 5.51265 4.92678 5.21976 5.21967C4.92687 5.51256 4.92687 5.98744 5.21976 6.28033L8.93938 9.99996L5.21967 13.7197C4.92678 14.0126 4.92678 14.4874 5.21967 14.7803C5.51256 15.0732 5.98744 15.0732 6.28033 14.7803L10 11.0606L13.7197 14.7803C14.0126 15.0732 14.4875 15.0732 14.7804 14.7803C15.0733 14.4874 15.0733 14.0126 14.7804 13.7197L11.0607 9.99996L14.7803 6.28034C15.0732 5.98745 15.0732 5.51257 14.7803 5.21968C14.4874 4.92679 14.0126 4.92679 13.7197 5.21968L10 8.9393L6.28042 5.21967Z' fill='white'/%3E%3C/svg%3E");
}

.dialog .close-button:hover {
    transform: scale(1);
}




/*===options button e.g. on tables -popup with edit, view delete etc ===*/
.options {
    position: relative;
    vertical-align: sub;
    text-align: right !important;
}

.options-btn {
    background: none;
    border: none;
    font-size: 36px;
    color: var(--outline);
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.options-btn:hover {
    background: var(--content-surface-hover);
}

.options-btn.open {
    background: var(--pink);
    color: var(--white);
}
.options .submenu {
    position: absolute;
    right: 10px;
    top: 58px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    min-width: 104px;
    z-index: 30;
    overflow: hidden;
}
.options .submenu-item {
    padding: 7px 20px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    color: var(--content-text);
    cursor: pointer;
    display: block;
    text-align: left;
    transition: background 0.12s, color 0.12s;
    border: none;
    background: transparent;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}
.options .submenu-item.button-style {
    text-decoration: none;
}

.options .submenu-item button {
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.options .submenu-item a {
    color: var(--outline);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}

/* icon spans inside options */
.options .submenu-item span[class^="icon-"],
.options .submenu-item span[class*=" icon-"] {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.options .submenu-item:hover span[class^="icon-"],
.options .submenu-item:hover span[class*=" icon-"] {
    color: var(--pink);
}

/* text spans inside options should flow inline beside the icon */
.options .submenu-item a > span:not([class^="icon-"]):not([class*=" icon-"]) {
    display: inline-block;
    width: auto;
}

.options .submenu-item:hover button, .options .submenu-item:hover a {
    color: var(--pink);
    background: transparent;
}

.options .submenu-item span[class^="icon-"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
}


/*==== standard black-white buttons e.g. edit, add, upload ====*/
.std-btn {
    height: fit-content;
    min-height: 30px;
    color: var( --white) !important;
    background-color: var( --black);
    border: var(--black) 1px solid;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 16px;
    text-transform: capitalize;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 20px;
    width: fit-content;
    letter-spacing: 0.2px;
    transition: all .3s ease;
    text-decoration: none;
}

.action-button {
    background-color: var(--black);
    border: var(--black) solid 1px;
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 124px;
    min-height: 30px;
    text-decoration: none;
}

.std-btn:hover, .action-button:hover {
    background: var(--white);
    color: var(--black) !important;
}

.action-button span[class^="icon-"], .std-btn span[class^="icon-"] {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
}

.std-btn span[class^="icon-"] {
    width: 20px;
    height: 20px;
}

.action-button span[class^="icon-"] {
    filter: invert(1) brightness(1.2) saturate(0);
    -webkit-filter: invert(1) brightness(1.2) saturate(0);
    width: 12px;
    height: 12px;
}

.action-button:hover span[class^="icon-"], .std-btn:hover span[class^="icon-"] {
    filter: invert(1) brightness(0) saturate(0);
    -webkit-filter: invert(1) brightness(0) saturate(0);
}


.search-btn {
    background: var(--black);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    height: 30px;
    padding: 0 41px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

    .search-btn:active {
        transform: translateY(1px);
    }

    @media (max-width: 576px) {
        .search-btn {
            padding: 0 14px;
        }
    }

/*==== end standard black-white buttons ====*/


.icon-view {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>');
}
.icon-reset {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_2674_1517)'%3E%3Cpath d='M7.9974 3.99998V5.19331C7.9974 5.49331 8.3574 5.63998 8.56406 5.42665L10.4241 3.56665C10.5574 3.43331 10.5574 3.22665 10.4241 3.09331L8.56406 1.23331C8.3574 1.02665 7.9974 1.17331 7.9974 1.47331V2.66665C5.05073 2.66665 2.66406 5.05331 2.66406 7.99998C2.66406 8.69331 2.7974 9.35998 3.04406 9.96665C3.22406 10.4133 3.7974 10.5333 4.1374 10.1933C4.3174 10.0133 4.39073 9.73998 4.29073 9.49998C4.0974 9.03998 3.9974 8.52665 3.9974 7.99998C3.9974 5.79331 5.79073 3.99998 7.9974 3.99998ZM11.8574 5.80665C11.6774 5.98665 11.6041 6.26665 11.7041 6.49998C11.8907 6.96665 11.9974 7.47331 11.9974 7.99998C11.9974 10.2066 10.2041 12 7.9974 12V10.8066C7.9974 10.5066 7.6374 10.36 7.43073 10.5733L5.57073 12.4333C5.4374 12.5666 5.4374 12.7733 5.57073 12.9066L7.43073 14.7666C7.6374 14.9733 7.9974 14.8266 7.9974 14.5333V13.3333C10.9441 13.3333 13.3307 10.9466 13.3307 7.99998C13.3307 7.30665 13.1974 6.63998 12.9507 6.03331C12.7707 5.58665 12.1974 5.46665 11.8574 5.80665Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2674_1517'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.icon-start {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_2674_1517)%22%3E%3Cpath%20d%3D%22M7.9974%203.99998V5.19331C7.9974%205.49331%208.3574%205.63998%208.56406%205.42665L10.4241%203.56665C10.5574%203.43331%2010.5574%203.22665%2010.4241%203.09331L8.56406%201.23331C8.3574%201.02665%207.9974%201.17331%207.9974%201.47331V2.66665C5.05073%202.66665%202.66406%205.05331%202.66406%207.99998C2.66406%208.69331%202.7974%209.35998%203.04406%209.96665C3.22406%2010.4133%203.7974%2010.5333%204.1374%2010.1933C4.3174%2010.0133%204.39073%209.73998%204.29073%209.49998C4.0974%209.03998%203.9974%208.52665%203.9974%207.99998C3.9974%205.79331%205.79073%203.99998%207.9974%203.99998ZM11.8574%205.80665C11.6774%205.98665%2011.6041%206.26665%2011.7041%206.49998C11.8907%206.96665%2011.9974%207.47331%2011.9974%207.99998C11.9974%2010.2066%2010.2041%2012%207.9974%2012V10.8066C7.9974%2010.5066%207.6374%2010.36%207.43073%2010.5733L5.57073%2012.4333C5.4374%2012.5666%205.4374%2012.7733%205.57073%2012.9066L7.43073%2014.7666C7.6374%2014.9733%207.9974%2014.8266%207.9974%2014.5333V13.3333C10.9441%2013.3333%2013.3307%2010.9466%2013.3307%207.99998C13.3307%207.30665%2013.1974%206.63998%2012.9507%206.03331C12.7707%205.58665%2012.1974%205.46665%2011.8574%205.80665Z%22%20fill%3D%22black%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2674_1517%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.icon-edit {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.855 6.19014L3.22 4.48514C3.27314 4.24821 3.39283 4.03137 3.565 3.86014L6.9 0.55514C7.23819 0.210628 7.69737 0.0115315 8.18 0.000140281C8.544 -0.00507524 8.89501 0.135327 9.155 0.39014C9.72309 1.06137 9.64975 2.06375 8.99 2.64514L5.655 5.98014C5.48377 6.15231 5.26693 6.272 5.03 6.32514L3.325 6.69014H3.23C3.10535 6.69491 2.9863 6.63821 2.91146 6.53842C2.83662 6.43863 2.81552 6.30846 2.855 6.19014ZM4.095 4.39514C4.02494 4.46303 3.97628 4.54993 3.955 4.64514L3.71 5.81014L4.875 5.56014C4.97021 5.53886 5.05711 5.4902 5.125 5.42014L8.46 2.08514C8.82534 1.79265 8.89784 1.26538 8.625 0.88514C8.50553 0.770994 8.34515 0.709725 8.18 0.71514C7.89528 0.726573 7.62624 0.84854 7.43 1.05514L4.095 4.39514Z" fill="currentColor"/><path d="M8.915 4.02014C8.70902 4.02283 8.54269 4.18916 8.54 4.39514V7.24014C8.5467 7.64228 8.39163 8.03026 8.1096 8.317C7.82756 8.60373 7.4422 8.7652 7.04 8.76514H2.275C1.44368 8.74884 0.777558 8.07161 0.775 7.24014V2.49514C0.788649 1.66269 1.46743 0.995029 2.3 0.99514H5.145C5.35211 0.99514 5.52 0.827247 5.52 0.62014C5.52 0.413034 5.35211 0.24514 5.145 0.24514H2.275C1.02825 0.245065 0.0137005 1.24847 0 2.49514V7.24014C0 8.49659 1.01855 9.51514 2.275 9.51514H7.02C8.2745 9.51238 9.29 8.49464 9.29 7.24014V4.39514C9.28731 4.18916 9.12098 4.02283 8.915 4.02014Z" fill="currentColor"/></svg>');
}
.icon-delete {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6v14a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>');
}
.icon-rename {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41L18.37 3.29c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}
.icon-select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>');
}
.icon-cancel {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
}
.icon-multiple {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M4.8 14H16V3H4.8V5.75M3.4 14H11.8V5.75H3.4V8.5M7.6 8.5H2V14H7.6V8.5Z" stroke="%23FFFFFF" stroke-width="1.2" stroke-linejoin="round"/></svg>');
}
.icon-info {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>');
}
.icon-json {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3m0 6v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3m0-6h16a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2z"/><path d="M9 12h6"/></svg>');
}
 .icon-audit {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ED3D96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"/><path d="M8 10h8"/><path d="M8 14h4"/></svg>');
}
 .icon-product {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ED3D96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l12-5-12 5v11l12-5v5l-12 5z"/></svg>');
}
 .icon-customer {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ED3D96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
}
 .icon-visit {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ED3D96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/><path d="M12 6v6l4 2"/></svg>');
}
.icon-add {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ED3D96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>');
 }

.icon-download {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M5.98493 9.85352L2.6251 6.45852C2.45656 6.28771 2.45656 6.011 2.6251 5.84019C2.70537 5.7568 2.81552 5.70977 2.93054 5.70977C3.04556 5.70977 3.15571 5.7568 3.23598 5.84019L5.85814 8.48852L5.85814 1.93769C5.85814 1.69607 6.05165 1.50019 6.29036 1.50019C6.52907 1.50019 6.72259 1.69607 6.72259 1.93769L6.72259 8.48852L9.34475 5.84019C9.42499 5.757 9.53534 5.71064 9.65019 5.71185C9.76491 5.71131 9.87501 5.75757 9.95563 5.84019C10.1242 6.011 10.1242 6.28771 9.95563 6.45852L6.5958 9.85352C6.42705 10.0241 6.15368 10.0241 5.98493 9.85352Z" fill="%23ffffff"/><path d="M9.21796 11.9814L3.45497 11.9814C3.21626 11.9814 3.02275 11.7856 3.02275 11.5439C3.02275 11.3023 3.21626 11.1064 3.45497 11.1064L9.21796 11.1064C9.45667 11.1064 9.65019 11.3023 9.65019 11.5439C9.65019 11.7856 9.45667 11.9814 9.21796 11.9814Z" fill="%23ffffff"/></svg>');
}

.icon-upload {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M7.09711 2.12795L10.4569 5.52295C10.6255 5.69376 10.6255 5.97047 10.4569 6.14128C10.3767 6.22467 10.2665 6.2717 10.1515 6.2717C10.0365 6.2717 9.92632 6.22467 9.84605 6.14128L7.22389 3.49295V10.0438C7.22389 10.2854 7.03038 10.4813 6.79167 10.4813C6.55296 10.4813 6.35944 10.2854 6.35944 10.0438V3.49295L3.73728 6.14128C3.65705 6.22447 3.5467 6.27084 3.43184 6.26962C3.31712 6.27016 3.20702 6.2239 3.12641 6.14128C2.95786 5.97047 2.95786 5.69376 3.12641 5.52295L6.48623 2.12795C6.65498 1.95735 6.92835 1.95735 7.09711 2.12795Z" fill="%23ffffff"/><path d="M3.91017 11.3796H9.67316C9.91187 11.3796 10.1054 11.5755 10.1054 11.8171C10.1054 12.0587 9.91187 12.2546 9.67316 12.2546H3.91017C3.67146 12.2546 3.47795 12.0587 3.47795 11.8171C3.47795 11.5755 3.67146 11.3796 3.91017 11.3796Z" fill="%23ffffff"/></svg>');
}

.icon-link {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ED3D96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>');
}

.icon-save {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><g clip-path='url(%23clip0_2221_5789)'><path d='M9.825 0.5H2.175C1.80221 0.5 1.5 0.802207 1.5 1.175V8.825C1.5 9.1978 1.80221 9.5 2.175 9.5H9.825C10.1978 9.5 10.5 9.1978 10.5 8.825V1.175C10.5 0.802207 10.1978 0.5 9.825 0.5Z' stroke='currentColor' stroke-linejoin='round'/><path d='M8 0.5V5H3.75V0.5H8Z' stroke='currentColor' stroke-linejoin='round'/><path d='M6.5 2.25V3.25' stroke='currentColor' stroke-linecap='round'/><path d='M2.75 0.5H9.00037' stroke='currentColor' stroke-linecap='round'/></g><defs><clipPath id='clip0_2221_5789'><rect width='12' height='12' fill='white'/></clipPath></defs></svg>");
}

.icon-studio {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2215%22%20viewBox%3D%220%200%2014%2015%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.3453%209.77419V5.32258C13.6978%205.12903%2013.9496%204.79032%2013.9496%204.35484C13.9496%203.72581%2013.446%203.24194%2012.7914%203.24194C12.5899%203.24194%2012.3885%203.29032%2012.187%203.3871L8.15827%201.16129V1.1129C8.15827%200.483871%207.65468%200%207%200C6.34532%200%205.84173%200.483871%205.84173%201.06452V1.1129L1.81295%203.3871C1.61151%203.24194%201.41007%203.19355%201.15827%203.19355C0.503597%203.19355%200%203.67742%200%204.30645C0%204.79032%200.302158%205.17742%200.705036%205.32258V9.67742C0.302158%209.87097%200%2010.2581%200%2010.6935C0%2011.3226%200.503597%2011.8065%201.15827%2011.8065C1.41007%2011.8065%201.61151%2011.7581%201.81295%2011.6129L5.89209%2013.8387V13.8871C5.89209%2014.5161%206.39568%2015%207.05036%2015C7.70504%2015%208.20863%2014.5161%208.20863%2013.8871C8.20863%2013.8387%208.20863%2013.7903%208.20863%2013.7419L12.187%2011.5645C12.3885%2011.7097%2012.5899%2011.7581%2012.8417%2011.7581C13.4964%2011.7581%2014%2011.2742%2014%2010.6452C14%2010.3065%2013.7482%209.91936%2013.3453%209.77419ZM11.6331%2010.6935L7.55396%2012.9677V8.51613C7.90647%208.32258%208.15827%207.98387%208.15827%207.54839V7.5L12.187%205.27419C12.187%205.27419%2012.2374%205.27419%2012.2374%205.32258V9.77419C11.9353%209.91936%2011.6835%2010.3065%2011.6331%2010.6935ZM6.39568%2013.0161L2.31655%2010.7419C2.31655%2010.3548%202.11511%2010.0161%201.76259%209.82258V5.27419C1.76259%205.27419%201.81295%205.27419%201.81295%205.22581L5.89209%207.45161C5.89209%207.5%205.89209%207.5%205.89209%207.5C5.89209%207.93548%206.14388%208.27419%206.4964%208.46774V12.9194C6.44604%2013.0161%206.44604%2013.0161%206.39568%2013.0161ZM6.44604%202.03226C6.59712%202.12903%206.84892%202.17742%207.05036%202.17742C7.30216%202.17742%207.5036%202.12903%207.65468%201.98387L11.6835%204.20968V4.25806C11.6835%204.30645%2011.6835%204.30645%2011.6835%204.35484L7.65468%206.58064C7.45324%206.48387%207.2518%206.3871%207.05036%206.3871C6.84892%206.3871%206.64748%206.43548%206.44604%206.53226L2.31655%204.30645L6.44604%202.03226Z%22%20fill%3D%22black%22/%3E%3C/svg%3E");
}

.icon-pim {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='9' viewBox='0 0 10 9' fill='none'%3E%3Cpath d='M0.583333 5.25H1.75C2.07083 5.25 2.33333 4.9875 2.33333 4.66667V3.5C2.33333 3.17917 2.07083 2.91667 1.75 2.91667H0.583333C0.2625 2.91667 0 3.17917 0 3.5V4.66667C0 4.9875 0.2625 5.25 0.583333 5.25ZM0.583333 8.16667H1.75C2.07083 8.16667 2.33333 7.90417 2.33333 7.58333V6.41667C2.33333 6.09583 2.07083 5.83333 1.75 5.83333H0.583333C0.2625 5.83333 0 6.09583 0 6.41667V7.58333C0 7.90417 0.2625 8.16667 0.583333 8.16667ZM0.583333 2.33333H1.75C2.07083 2.33333 2.33333 2.07083 2.33333 1.75V0.583333C2.33333 0.2625 2.07083 0 1.75 0H0.583333C0.2625 0 0 0.2625 0 0.583333V1.75C0 2.07083 0.2625 2.33333 0.583333 2.33333ZM3.5 5.25H9.33333C9.65417 5.25 9.91667 4.9875 9.91667 4.66667V3.5C9.91667 3.17917 9.65417 2.91667 9.33333 2.91667H3.5C3.17917 2.91667 2.91667 3.17917 2.91667 3.5V4.66667C2.91667 4.9875 3.17917 5.25 3.5 5.25ZM3.5 8.16667H9.33333C9.65417 8.16667 9.91667 7.90417 9.91667 7.58333V6.41667C9.91667 6.09583 9.65417 5.83333 9.33333 5.83333H3.5C3.17917 5.83333 2.91667 6.09583 2.91667 6.41667V7.58333C2.91667 7.90417 3.17917 8.16667 3.5 8.16667ZM2.91667 0.583333V1.75C2.91667 2.07083 3.17917 2.33333 3.5 2.33333H9.33333C9.65417 2.33333 9.91667 2.07083 9.91667 1.75V0.583333C9.91667 0.2625 9.65417 0 9.33333 0H3.5C3.17917 0 2.91667 0.2625 2.91667 0.583333Z' fill='black'/%3E%3C/svg%3E");
}

.icon-srm {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M11.25 8.125H8.08754C7.87504 10.0625 6.67504 11.7 5.00004 12.5312C4.98129 13.6625 3.96254 14.55 2.78129 14.3438C2.03129 14.2125 1.41254 13.5938 1.28129 12.8438C1.06879 11.6562 1.97504 10.625 3.12504 10.625C3.71879 10.625 4.23754 10.9062 4.58129 11.3375C5.76879 10.6937 6.61879 9.51875 6.81879 8.125H4.88129C4.58129 8.9625 3.71879 9.525 2.74379 9.3375C2.00629 9.19375 1.41254 8.5875 1.27504 7.85C1.06254 6.6625 1.97504 5.625 3.12504 5.625C3.93754 5.625 4.62504 6.15 4.88754 6.875H6.82504C6.62504 5.48125 5.76879 4.3125 4.58129 3.6625C4.18129 4.1625 3.53754 4.4625 2.82504 4.35C2.05629 4.23125 1.41254 3.60625 1.28129 2.8375C1.07504 1.65625 1.98129 0.625 3.12504 0.625C4.15004 0.625 4.97504 1.44375 4.99379 2.46875C6.66879 3.3 7.86879 4.9375 8.08129 6.875H11.25V5.75625C11.25 5.475 11.5875 5.3375 11.7813 5.5375L13.525 7.28125C13.65 7.40625 13.65 7.6 13.525 7.725L11.7813 9.46875C11.5875 9.6625 11.25 9.525 11.25 9.24375V8.125Z' fill='black'/%3E%3C/svg%3E");
}

/* generic icon sizing for icon-* classes used in components */
[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 8px;
    vertical-align: middle;
}

/*upload in form e.g. add document */

.upload-area {
    border: 2px dashed var(--content-border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    background: var(--content-bg);
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
}

.upload-area:hover {
    background-color: var(--content-surface-hover);
}

.upload-area.drag-over {
    border-color: var(--pink);
    background: rgba(237,61,150,0.03);
}

.upload-area label {
    display: block;
    margin: 0;
    font-size: 14px;
    color: var(--outline);
}

.upload-area input[type="file"] {
    display: none;
}


/*.submenu-item .edit-button .edit-icon,
.submenu-item .view-button .view-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0;
    line-height: 0;
    margin-right: 8px;
}
.submenu-item .edit-button .edit-icon {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ED3D96" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41L18.37 3.29c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}
.submenu-item.view-button .view-icon {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ED3D96" d="M12 5C5 5 1 12 1 12s4 7 11 7 11-7 11-7-4-7-11-7zm0 11a4 4 0 110-8 4 4 0 010 8z"/></svg>');
}*/

.supplier, .block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.block-header {
    display: flex;
    justify-content: end;
}
h1:focus, header a:focus
{
    outline:none;
}
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}
.invalid {
    outline: 1px solid #e50000;
}
.validation-message {
    color: #e50000;
}
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 10px 10px 10px 37px;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
.field-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/*===responsive===*/

/*h1 headings desktop 42px:
    max-width 5768px = 32px
*/