:root {
    --wmg-blue: 30, 89, 174;
    --wmg-blue-hover: 24, 72, 140;
    --paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='323232' d='M18 15.75q0 2.6-1.825 4.425T11.75 22t-4.425-1.825T5.5 15.75V6.5q0-1.875 1.313-3.187T10 2t3.188 1.313T14.5 6.5v8.75q0 1.15-.8 1.95t-1.95.8t-1.95-.8t-.8-1.95V6h2v9.25q0 .325.213.538t.537.212t.538-.213t.212-.537V6.5q-.025-1.05-.737-1.775T10 4t-1.775.725T7.5 6.5v9.25q-.025 1.775 1.225 3.013T11.75 20q1.75 0 2.975-1.237T16 15.75V6h2z'/%3E%3C/svg%3E");
    --location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='323232' d='M12 12q.825 0 1.413-.587T14 10t-.587-1.412T12 8t-1.412.588T10 10t.588 1.413T12 12m0 7.35q3.05-2.8 4.525-5.087T18 10.2q0-2.725-1.737-4.462T12 4T7.738 5.738T6 10.2q0 1.775 1.475 4.063T12 19.35M12 22q-4.025-3.425-6.012-6.362T4 10.2q0-3.75 2.413-5.975T12 2t5.588 2.225T20 10.2q0 2.5-1.987 5.438T12 22m0-12'/%3E%3C/svg%3E");
    --location-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='323232' d='M11 14h2v-3h3V9h-3V6h-2v3H8v2h3zm1 5.35q3.05-2.8 4.525-5.087T18 10.2q0-2.725-1.737-4.462T12 4T7.738 5.738T6 10.2q0 1.775 1.475 4.063T12 19.35M12 22q-4.025-3.425-6.012-6.362T4 10.2q0-3.75 2.413-5.975T12 2t5.588 2.225T20 10.2q0 2.5-1.987 5.438T12 22m0-12'/%3E%3C/svg%3E");
    --location-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='323232' d='M8.5 13.5h1.45l3.9-3.925l-1.425-1.425l-3.925 3.9zm6.075-4.65l.7-.7q.125-.125.125-.262t-.125-.263l-.9-.9q-.125-.125-.263-.125t-.262.125l-.7.7zM12 19.35q3.05-2.8 4.525-5.087T18 10.2q0-2.725-1.737-4.462T12 4T7.738 5.738T6 10.2q0 1.775 1.475 4.063T12 19.35M12 22q-4.025-3.425-6.012-6.362T4 10.2q0-3.75 2.413-5.975T12 2t5.588 2.225T20 10.2q0 2.5-1.987 5.438T12 22m0-12'/%3E%3C/svg%3E");
    --package: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='323232' d='M11 19.425v-6.85L5 9.1v6.85zm2 0l6-3.475V9.1l-6 3.475zm-2 2.3L4 17.7q-.475-.275-.737-.725t-.263-1v-7.95q0-.55.263-1T4 6.3l7-4.025Q11.475 2 12 2t1 .275L20 6.3q.475.275.738.725t.262 1v7.95q0 .55-.262 1T20 17.7l-7 4.025Q12.525 22 12 22t-1-.275m5-13.2l1.925-1.1L12 4l-1.95 1.125zm-4 2.325l1.95-1.125L8.025 6.3l-1.95 1.125z'/%3E%3C/svg%3E");
    --item: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='323232' d='M11 19.425v-6.85L5 9.1v6.85zm2 0l6-3.475V9.1l-6 3.475zm-1-8.575l5.925-3.425L12 4L6.075 7.425zM4 17.7q-.475-.275-.737-.725t-.263-1v-7.95q0-.55.263-1T4 6.3l7-4.025Q11.475 2 12 2t1 .275L20 6.3q.475.275.738.725t.262 1v7.95q0 .55-.262 1T20 17.7l-7 4.025Q12.525 22 12 22t-1-.275zm8-5.7'/%3E%3C/svg%3E");
    --item-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='323232' d='M13 19.3v-6.7l6-3.4V13c.7 0 1.4.1 2 .4V7.5c0-.4-.2-.7-.5-.9l-7.9-4.4c-.2-.1-.4-.2-.6-.2s-.4.1-.6.2L3.5 6.6c-.3.2-.5.5-.5.9v9c0 .4.2.7.5.9l7.9 4.4c.2.1.4.2.6.2s.4-.1.6-.2l.9-.5c-.3-.6-.4-1.3-.5-2M12 4.2l6 3.3l-2 1.1l-5.9-3.4zm-1 15.1l-6-3.4V9.2l6 3.4zm1-8.5L6 7.5l2-1.2l6 3.5zm8 4.2v3h3v2h-3v3h-2v-3h-3v-2h3v-3z'/%3E%3C/svg%3E");
    --item-update: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='323232' d='M12 4L6.075 7.425L12 10.85l5.925-3.425zM3 15.975v-7.95q0-.55.263-1T4 6.3l7-4.025q.25-.125.488-.2T12 2t.525.075t.475.2L20 6.3q.475.275.738.725t.262 1V12h-2V9.1l-7.025 4.05L5 9.1v6.85l6 3.475v2.3L4 17.7q-.475-.275-.737-.725t-.263-1M18 22q.2 0 .35-.15t.15-.35t-.15-.35T18 21t-.35.15t-.15.35t.15.35t.35.15m-.5-2h1v-4h-1zm.5 4q-2.075 0-3.537-1.463T13 19t1.463-3.537T18 14t3.538 1.463T23 19t-1.463 3.538T18 24m-6-12.275'/%3E%3C/svg%3E");
    --container: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='323232' d='M2 10.96a.985.985 0 0 1-.37-1.37L3.13 7c.11-.2.28-.34.47-.42l7.83-4.4c.16-.12.36-.18.57-.18s.41.06.57.18l7.9 4.44c.19.1.35.26.44.46l1.45 2.52c.28.48.11 1.09-.36 1.36l-1 .58v4.96c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18s-.41-.06-.57-.18l-7.9-4.44A.99.99 0 0 1 3 16.5v-5.54c-.3.17-.68.18-1 0m10-6.81v6.7l5.96-3.35zM5 15.91l6 3.38v-6.71L5 9.21zm14 0v-3.22l-5 2.9c-.33.18-.7.17-1 .01v3.69zm-5.15-2.55l6.28-3.63l-.58-1.01l-6.28 3.63z'/%3E%3C/svg%3E");
}

html, body {
    color: rgb(50, 50, 50);
    background: rgba(var(--color-sf-surface-variant));
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Helvetica, sans-serif;
    font-weight: 700;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1: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: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.primary-color {
    color: rgba(var(--color-sf-primary)) !important;
}

.mirror {
    transform: scaleX(-1);
}

.raised-panel {
    border: none;
    margin: 1rem;
    margin-top: 0;
    padding: 1rem;
    border-radius: 5px;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.18) 0 3.2px 7.2px;
}


.min-width-dropdown {
    min-width:150px;
}

/*
    Syncfusion grid
*/
/* Add the radius and remove the border */
.sf-grid.e-grid {
    border-radius: 5px;
    border: none;
    background: rgb(var(--color-sf-surface));
}

    /* Remove the top border */
    /* Add the radius to the header */
    .sf-grid.e-grid .e-gridheader {
        border: none;
        border-bottom: 1px solid rgba(var(--color-sf-on-surface), 0.1);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    /* The layout or skeleton of the header cell */
    .sf-grid.e-grid .e-headercelldiv {
        height: 32px;
    }

    /* For styling the text within the header */
    .sf-grid.e-grid .e-headertext {
        font-size: 12px;
        font-weight: 400;
        line-height: 32px;
    }

    /* Add left padding to the first child of each row */
    .sf-grid.e-grid .e-columnheader .e-headercell:first-child,
    .sf-grid.e-grid .e-row .e-rowcell:first-child {
        padding-left: 20px;
    }

    /* Remove the row borders */
    .sf-grid.e-grid .e-rowcell,
    .sf-grid.e-grid .e-row .e-rowcell {
        border: none;
    }

    /* Cell styling */
    .sf-grid.e-grid .e-row .e-rowcell {
        padding: 4px 8px;
        font-size: 14px;
    }

    /* Don't show a border for cells that are selected */
    .sf-grid.e-grid .e-focused {
        box-shadow: none !important;
    }

    /* Sort icon */
    .sf-grid.e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv {
        margin: -22px 22px -12px 8px;
    }

    /* Column menu icon */
    .sf-grid.e-grid .e-columnmenu {
        margin: -22px -18px -12px 8px;
    }

    /* Do not display the column menu icon unless filtering is applied */
    .sf-grid.e-grid .e-headercell .e-columnmenu:not(.e-filtered)::before {
        display: none;
    }

    /* Show the column menu icon if we hover on the header cell */
    .sf-grid.e-grid .e-headercell:hover .e-columnmenu::before {
        display: inline;
    }

    /* Change the icon to a filter icon when filtering is applied */
    .sf-grid.e-grid .e-headercell .e-icons.e-columnmenu:is(.e-filtered)::before {
        content: "\e7f7";
        color: rgba(var(--color-sf-on-surface-variant));
    }

    /* When the filter icon is shown a margin is added, so reduce the padding to compensate */
    .sf-grid.e-grid .e-columnheader .e-headercell.e-fltr-icon {
        padding-left: 5px;
    }

        .sf-grid.e-grid .e-columnheader .e-headercell.e-fltr-icon:first-child {
            padding-left: 17px;
        }

    .sf-grid.e-grid .e-toolbar {
        border-top: none;
    }

    

/*
    Scrollbar
*/

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

    .custom-scrollbar:hover {
        scrollbar-color: rgb(0,0,0,0.2) transparent;
    }

/* Animations */

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/*
    "clear" button on SfDropdownList.
    The material css adds padding which offsets the icon within the button.
*/

.e-float-input.e-input-group .e-clear-icon, .e-float-input.e-input-group.e-control-wrapper .e-clear-icon {
    padding: 0px !important;
}

/*
    Panels and inputs
*/

.panel-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.panel-input,
.panel-grid {
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

    .panel-input:last-child,
    .panel-grid:last-child {
        margin-bottom: 0;
    }

.input-row {
    display: flex;
    column-gap: 1em;
}

.input-row .panel-input {
    width: 100%;
}

.clickable {
}

    .clickable:hover {
        cursor: pointer;
    }

.styled-dialog .e-dialog .e-dlg-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(50, 50, 50);
}

.input-with-message {
    margin-bottom: 1em;
}

    .input-with-message:last-child {
        margin-bottom: 0px;
    }

.required .e-input-group label::after,
.required.e-headertext::after {
    position: absolute;
    display: inline-block;
    content: "";
    background-color: rgba(var(--color-sf-error));
    border-radius: 50%;
    height: 4px;
    width: 4px;
    margin-left: 3px;
    margin-top: 3px;
}

.required.e-headertext::after {
    margin-top: 10px;
}

/* Used with Form buttons */
.btn-bigger {
    height:2.5rem!important;
    font-size:1.1rem!important;
}

.fixed-bottom-margin {
    height:160px;    
}

.fixed-bottom {
    z-index:999;
}

.fixed-bottom-color {
    background-color: rgb(var(--color-sf-surface-variant));
    box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
}

/* Pin icon */
.pin-active {
    color: rgb(var(--color-sf-primary));
}

.pin-inactive {
    color: var(--bs-gray-500);
}

/* Custom icons. */

*.e-btn-group .e-btn.e-icon-btn {
    padding: 6px;
}

    *.e-btn-group .e-btn.e-icon-btn .e-btn-icon {
        font-size: 18px;
    }

/* Syncfusion dropdown tree and tree view */

.e-ddt.e-popup .e-treeview .e-list-text,
.location-treeview.e-treeview .e-list-text {
    min-height: 28px;
    max-height: 28px;
}

.e-ddt.e-popup .e-treeview .e-list-item .e-list-text,
.location-treeview.e-treeview .e-list-item .e-list-text {
    padding: 4px 8px;
}

.e-ddt.e-popup .e-treeview .e-list-item .e-fullrow,
.location-treeview.e-treeview .e-list-item .e-fullrow {
    height: 28px;
}

.e-ddt.e-popup .e-treeview .e-icons.interaction.e-icon-collapsible::before,
.location-treeview.e-treeview .e-icons.interaction.e-icon-collapsible::before {
    transform: translate(0, -2px);
}

.e-ddt.e-popup .e-treeview .e-icons.interaction.e-icon-expandable::before,
.location-treeview.e-treeview .e-icons.interaction.e-icon-expandable::before {
    transform: translate(0, -6px);
}

/* Custom icon definitions */

.w-icons {
    font-family: e-icons; /* Required for proper sizing of icon buttons using custom icon classes. */
}

.w-icons:before {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: rgb(50 50 50);
    content: "";
    mask-repeat: no-repeat;
    mask-size: cover;
}

.w-icons.pin-active:before {
    background-color: rgb(var(--color-sf-primary));
}

.w-icons.pin-inactive:before {
    background-color: var(--bs-gray-500);
}

.w-icons.w-paperclip:before {
    -webkit-mask-image: var(--paperclip);
    mask-image: var(--paperclip);
}

.w-icons.w-item:before {
    -webkit-mask-image: var(--item);
    mask-image: var(--item);
}

.w-icons.w-item-add:before {
    -webkit-mask-image: var(--item-add);
    mask-image: var(--item-add);
}

.w-icons.w-item-update:before {
    -webkit-mask-image: var(--item-update);
    mask-image: var(--item-update);
}

.w-icons.w-location:before {
    -webkit-mask-image: var(--location);
    mask-image: var(--location);
}

.w-icons.w-location-add:before {
    -webkit-mask-image: var(--location-add);
    mask-image: var(--location-add);
}

.w-icons.w-location-edit:before {
    -webkit-mask-image: var(--location-edit);
    mask-image: var(--location-edit);
}

.w-icons.w-container:before {
    -webkit-mask-image: var(--container);
    mask-image: var(--container);
}

.w-icons.w-package:before {
    -webkit-mask-image: var(--package);
    mask-image: var(--package);
}