@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap');

html, body,
.e-control, .e-css, .e-card,
.e-listbox-wrapper, .e-listbox-container, .e-listboxtool-wrapper,
.e-inplaceeditor .e-editable-value-container .e-editable-value,
.e-radio + label .e-label,
.e-checkbox-wrapper .e-frame + .e-label {
    font-family: 'Afacad Flux', sans-serif !important;
    font-weight: 500;
}


/* Scroll bar For Chrome, Safari, and Edge */
::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #a3b4af;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

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

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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."
    }



/* custom styles */
#form-fields-editor-wrapper .e-list-item {
    height: auto;
}

#form-fields-editor-wrapper .e-listbox-container {
    border: hidden;
}

.e-plus-icon::before {
    content: '\F1A6';
}

.e-sidebar {
    height: auto !important;
    overflow: hidden !important;
}

body > div.e-listbox-container {
    /* listbox's dragging item has a height value preventing background to cover entire height, this is to override that */
    /* we use this selector as the temporary dragging item is included as the last item in body */

    background-color: gray;
    opacity: 0.7;
}

#TaskFieldsListBox li.e-selected {
    /* we don't need selection in this listbox, but can't remove that funcitonality */
    /* so we remove its visual  */
    background-color: transparent;
}

#TaskFieldsListBox li.e-list-item:hover {
    /*default hover color mixes up with selected color. 
    it's not necessary to color hovered items.*/
    background-color: transparent;
}

/*#TaskFieldsListBox li.e-list-item:hover.e-selected {*/
/* above rule must be reset when selected */
/*background-color: #e9ecef;
    }*/

#TaskFieldsListBox.e-listbox-container:not(.e-list-template) .e-list-item {
    /* removing listbox item's padding */
    /* we apply our own padding and own background color for our own selection */
    /* this default padding breakes the look */
    padding: 0px;
}

#TaskFieldsListBox.e-listbox-container .e-placeholder {
    /*this is what you see as the placeholder whey you drag on the listbox*/
    /* it should be seen easier */
    height: 14px;
    border-radius: 10px;
}

#FieldTypes_ForNewField_ListBox li.e-selected {
    /* we don't need selection in this listbox, but can't remove that funcitonality */
    /* so we remove its visual  */
    background-color: transparent;
}

#FieldTypes_ForNewField_ListBox.e-listbox-container .e-placeholder {
    /* for field types listbox we don't want to see that placeholder during dragging */
    /* we never drop into that listbox  */
    height: 0;
}

#OtherWorkflowFields_ListBox.e-listbox-container .e-placeholder {
    /* for other workflow fields listbox we don't want to see that placeholder during dragging */
    /* we never drop into that listbox  */
    height: 0;
}

#form-edit-dialog.e-dialog .e-dlg-content {
    /*dialog popup adds a padding to the content, we don't want that*/
    padding: 0px;
}

#TaskFieldsListBox.e-listbox-container .e-input-group {
    /*inputs in listbox has a default padding, we don't want that*/
    padding: 0px;
}


#form-edit-dialog {
    /*max-height: 100% !important;*/
}

.e-upload-files {
    /*
        file upload, uploaded file list
        when it's hidden by it API, it becomes buggy, this is a workaround
    */
    display: none;
}

/*blazor diagram*/
.custom-node.selected, .custom-node.selected .diagram-port {
    border: 1px solid #6e9fd4;
}

.custom-node:hover .diagram-port {
    visibility: visible;
}

.custom-node .diagram-port {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f5f5f5;
    border: 1px solid #d4d4d4;
    cursor: pointer;
    /*visibility: hidden;*/
    position: absolute;
}

    .custom-node .diagram-port:hover, .node > .card .diagram-port.has-links {
        visibility: visible;
        background-color: black;
    }

    .custom-node .diagram-port.bottom {
        position: absolute;
        bottom: -10px;
        left: 90px;
    }

    .custom-node .diagram-port.top {
        position: absolute;
        top: -10px;
        left: 90px;
    }

    .custom-node .diagram-port.left {
        position: absolute;
        /*bottom: -10px;*/
        left: -10px;
    }

    .custom-node .diagram-port.right {
        position: absolute;
        /*top: -10px;*/
        right: -10px;
    }

.custom-end-node .diagram-port.left {
    left: -6px;
    top: 40px;
}

.custom-start-node .diagram-port.right {
    right: -11px;
    top: 40px;
}

.custom-start-node .diagram-port.bottom {
    position: absolute;
    transform: rotate(-90deg);
    left: 76px;
    top: 88px;
}

.custom-node .portal-node .diagram-port.left {
    left: -10px;
    top: 23px;
}

.custom-parallel-node .diagram-port.left {
    left: -16px;
    top: 40px;
}

.custom-parallel-node .diagram-port.right {
    right: -15px;
    top: 39px;
}