html, body {
    font-family: 'Nunito Sans',sans-serif;
}

.full-screen-container {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
}


.flex-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow-y: auto;
}

.btn-primary {
    background-color: #FF5A47;
    color: white;
}

.w-100px {
    width: 100px;
    max-width: 100px;
}

.tabs {
    margin-left: auto;
    margin-right: auto;
}

.tab {
    padding: 10px 20px;
    text-align: center;
    background-color: #93939A;
    color: white;
    outline: none;
    min-width: 15vw;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 0px !important;
}


/* DEV EXPRESS COMPONENTS */

/* DevExpress and Bootstrap Themes */
.alt-item > td:not(.dxbl-grid-empty-cell),
.alt-item > td:not(.dxbl-grid-indent-cell) {
    background-color: whitesmoke !important;
}

.do-entry-selected-item {
    background-color: lavenderblush !important;
}


/* Accordian */
.dxbl-group > .dxbl-group-header {
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0px;
}


.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before, .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(0px - var(--dxbl-border-width-with-scaling, var(--dxbl-list-box-item-border-width, 0px)));
    top: calc(0px - var(--dxbl-border-width-with-scaling, var(--dxbl-list-box-item-border-width, 0px)));
    right: calc(0px - var(--dxbl-border-width-with-scaling, var(--dxbl-list-box-item-border-width, 0px)));
    bottom: calc(0px - var(--dxbl-border-width-with-scaling, var(--dxbl-list-box-item-border-width, 0px)));
    border-radius: inherit;
    background-color: #FF5A47;
    opacity: 90%;
}


.dxbl-grid-header-row {
    background: #FF5A47;
    color: white;
}

.dxbl-pager-active-page-btn {
    background: #FF5A47;
    color: white;
}

.dxbl-tabs {
    --dxbl-tabs-color: var(--bs-body-color, var(--dxbl-body-color, inherit));
    --dxbl-tabs-bg: var(--bs-body-bg, var(--dxbl-body-bg, inherit));
    --dxbl-tabs-font-family: inherit;
    --dxbl-tabs-font-size: 0.875rem;
    --dxbl-tabs-line-height: 1.4285;
    --dxbl-tabs-padding-y: 0;
    --dxbl-tabs-padding-top: var(--dxbl-tabs-padding-y);
    --dxbl-tabs-padding-bottom: var(--dxbl-tabs-padding-y);
    --dxbl-tabs-padding-x: 0;
    --dxbl-tabs-padding-left: var(--dxbl-tabs-padding-x);
    --dxbl-tabs-padding-right: var(--dxbl-tabs-padding-x);
    --dxbl-tabs-separator-border-color: white;
    --dxbl-tabs-separator-border-style: solid;
    --dxbl-tabs-separator-border-width: 1px;
    --dxbl-tabs-tab-padding-x: 1rem;
    --dxbl-tabs-tab-padding-y: 0.25rem;
    --dxbl-tabs-tab-border-style: solid;
    --dxbl-tabs-tab-border-color: var(--bs-border-color, var(--bs-gray-400, #ced4da));
    --dxbl-tabs-tab-border-width: 1px;
    --dxbl-tabs-tab-selected-bg: unset;
    --dxbl-tabs-tab-selected-color: var(--bs-primary, var(--primary));
    --dxbl-tabs-tab-hover-color: inherit;
    --dxbl-tabs-tab-hover-bg: unset;
    --dxbl-tabs-tab-width: unset;
    --dxbl-tabs-image-spacing: 0.375rem;
    --dxbl-tabs-scroll-btn-color: unset;
    --dxbl-tabs-scroll-btn-hover-color: unset;
    --dxbl-tabs-scroll-btn-disabled-color: unset;
    --dxbl-tabs-tab-focus-outline-width: 0.125rem;
    --dxbl-tabs-tab-focus-outline-color: var(--bs-primary, var(--primary));
    --dxbl-tabs-content-color: var(--bs-body-color, var(--dxbl-body-color, inherit));
    --dxbl-tabs-content-font-size: 0.875rem;
    /* --dxbl-tabs-content-line-height: 1.4285; */
    display: block;
}


.dxbl-tabs.dxbl-tabs-top > .dxbl-tabs-tablist {
    /*border-bottom: var(--dxbl-tabs-separator-border-width) var(--dxbl-tabs-separator-border-style) var(--dxbl-tabs-separator-border-color);*/
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    padding-bottom: 0;
}

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active, .dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active {
    background-color: #FF5A47;
    color: white;
}

.dxbl-tabs.dxbl-tabs-top > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl), .dxbl-tabs.dxbl-tabs-top > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl) {
    color: black;
}

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-active):not(.dxbl-disabled):not(:disabled):not(.dxbl-disabled):not(:disabled):hover, .dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-active):not(.dxbl-disabled):not(:disabled):not(.dxbl-disabled):not(:disabled):hover {
    border-color: var(--dxbl-tabs-tab-border-color);
    position: relative;
    background-color: #FF5A47;
    color: white;
}

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled), .dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled) {
    cursor: pointer;
    color: white;
}

.dxbl-checkbox {
    --dxbl-checkbox-radio-checked-border-color: #FF5A47;
    --dxbl-checkbox-radio-check-bg: #FF5A47;
    --dxbl-checkbox-radio-checked-hover-bg: #FF5A47;
}

.dxbl-btn-standalone.dxbl-btn-primary {
    --dxbl-btn-color: white;
    --dxbl-btn-bg: #FF5A47;
    --dxbl-btn-border-color: #FF5A47;
    --dxbl-btn-active-bg: #FF5A47;
    --dxbl-btn-active-color: #FF5A47;
    --dxbl-btn-active-border-color: #FF5A47;
    --dxbl-btn-active-background: #FF5A47;
    --dxbl-btn-hover-bg: #D84C3C;
    --dxbl-btn-hover-color: white;
    --dxbl-btn-hover-border-color: #D84C3C;
    --dxbl-btn-hover-background: #D84C3C;
    --dxbl-btn-caption-disabled-opacity: 0.85;
    --dxbl-btn-icon-disabled-opacity: 0.85;
    --dxbl-btn-disabled-color: #FFFFFF;
    --dxbl-btn-disabled-background: #808080;
    --dxbl-btn-disabled-bg: #808080;
    --dxbl-btn-disabled-border-color: #808080;
    --dxbl-btn-focus-outline-size: 0.125rem;
    --dxbl-btn-focus-outline-offset: 0.063rem;
    --dxbl-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    --dxbl-btn-focus-color: white;
    --dxbl-btn-focus-border-bg: #D84C3C;
    --dxbl-btn-focus-outline-color: #D84C3C;
    border-radius: 0;
}

.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: #FF5A47;
    --dxbl-checkbox-check-element-checked-hover-bg: #D84C3C;
}

.dxbl-drawer-left.dxbl-drawer-open.dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body, .dxbl-drawer-right.dxbl-drawer-open.dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
    background: #efeff0;
}


.dxbl-loading-panel {
    --dxbl-loading-panel-underlay-bg: var(--bs-body-bg);
    --dxbl-loading-panel-overlay-bg: var(--bs-gray-200);
    --dxbl-loading-panel-overlay-opacity: 0.125;
    --dxbl-loading-panel-indicator-size: 2rem;
    --dxbl-loading-panel-message-size: 0.875rem;
    --dxbl-loading-panel-message-color: #FF5A47;
    --dxbl-loading-panel-message-space: 0.75rem;
    --dxbl-loading-panel-indicator-area-padding-x: 1.25rem;
    --dxbl-loading-panel-indicator-area-padding-y: 1rem;
    --dxbl-loading-panel-indicator-area-margin: 1rem;
    --dxbl-loading-panel-indicator-area-height: unset;
    --dxbl-loading-panel-indicator-area-width: unset;
    --dxbl-loading-panel-indicator-area-background-color: var(--bs-body-bg, var(--dxbl-body-bg, #fff));
    --dxbl-loading-panel-width: 100%;
    --dxbl-loading-panel-height: 100%;
    top: 0;
    left: 0;
    border-radius: 0px;
}

.dxbl-wait-indicator {
    --dxbl-wait-indicator-color: #FF5A47;
}


.dxbl-loading-panel .dxbl-loading-panel-container .dxbl-loading-panel-indicator-area {
    border-radius: 0px;
}

.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-saturated.dxbl-toast-render-success {
    --dxbl-toast-background-color: #FF5A47;
    --dxbl-toast-accent-line-color: #FF5A47;
    --dxbl-toast-front-color: #fff;
    --dxbl-toast-header-font-color: var(--dxbl-toast-front-color);
    --dxbl-toast-text-font-color: var(--dxbl-toast-header-font-color);
    --dxbl-toast-icon-color: #fff;
    --dxbl-toast-close-button-color: var(--dxbl-toast-front-color);
    --dxbl-toast-close-button-hover-color: #495057;
    --dxbl-toast-close-button-hover-bg: #e9ecef;
}



/* Drag Drop*/
/*add this to avoid flickering*/
.plk-dd-inprogess > * {
    pointer-events: none;
}
/*dropzone style style*/
.plk-dd-dropzone {
    min-height: 50px;
}
/*drag drop styles*/

.plk-dd-spacing {
    height: 5px;
}

.plk-dd-spacing-dragged-over {
    padding: 25px;
}

.plk-dd-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

    .plk-dd-dragged-over > div {
        background-color: lightgray;
        opacity: 0.6;
        animation: blinker 1s linear infinite;
    }

.plk-dd-dragged-over-denied {
    background-color: red;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

.plk-dd-in-transit {
    opacity: 0;
}

    .plk-dd-in-transit > div {
        opacity: 0;
    }

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink_me {
    animation: blinker 1s linear infinite;
}

row-hover:hover {
    background-color: red;
}


form {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    text-align: center;
}

.containerLogin {
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0 5px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 550px;
    margin-top: auto;
    margin-bottom: auto;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
}

.log-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
}

.overlay {
    background: #FF5A47;
    background: -webkit-linear-gradient(to right, #FF5A47, orangered);
    background: linear-gradient(to right, #FF5A47, orangered);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
}

.overlay-right {
    right: 0;
}


#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;
}

.grs-active {
    background-color: #FF5A47 !important;
    color: white !important; }

.btn-group-container {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px; }

.btn-group {
    width: 100%;
}

.btn-group button {
    background-color: #93939A;
    /* Red background */
    border: 2px solid white;
    /* White border */
    color: white;
    /* White text */
    padding: 10px 24px;
    /* Some padding */
    cursor: pointer;
    /* Pointer/hand icon */
    width: 16.6%; }

.btn-group button:not(:last-child) {
    border-right: none;
    /* Prevent double borders */ }

.btn-group button:disabled {
    background-color: #808080;
    color: black;
    cursor: not-allowed; }

.btn-group button:disabled:hover {
    background-color: #808080;
    color: black;
    cursor: not-allowed; }

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table; }

/* Add a background color on hover */
.btn-group button:hover {
    background-color: #FF5A47; }

@media screen and (max-width: 776px) {
    .btn-group {
        width: 100%;
        flex-direction: column;
        justify-content: center; }

    .btn-group button {
        width: 100%; } }