/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/


@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.inside-grey {
    background-color: #f6f6fb;
}

.table-subtext {
    font-size: 12px;
}

.mud-drawer {
    /*z-index: auto !important;*/ /* or a low number like 90 */
    z-index: auto !important;
}

.mud-appbar {
    /*z-index: 1000 !important;*/
    z-index: 1000 !important; /* higher than drawer */
    position: relative;
}

/* On small screens (mobile), Drawer overlays AppBar */
@media (max-width: 768px) {
    .mud-drawer {
        z-index: 1100 !important; /* above appbar */
    }

    .mud-appbar {
        z-index: 1000 !important; /* below drawer */
    }
}

@media (max-width: 959px) {
    .mud-drawer-overlay.mud-drawer-overlay--open.mud-drawer-overlay-responsive.mud-drawer-overlay-md {
        /* display: block; */
        display: none;
    }
}

/*.e-dlg-overlay {
    z-index: 2055 !important;
}*/

.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    font-size: 13px;
}

.mud-toolbar.mud-toolbar-gutters.mud-toolbar-appbar {
    height: auto;
}

.mud-snackbar-container {
    z-index: 9999999 !important;
}

/*Custom boostrap card colour*/
.bg-updatechat {
    background-color: #25D366 !important;
    opacity: 0.8;
}

/*.bg-updatechat::before, .bg-updatechat::after {
        background-color: var(--btn-background) !important;
    }*/

.update {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 30vh;
    width: 100%;
    text-align: justify;
    background-color: #d3d3d31c;
    padding: 0 0.5rem;
}

.mud-timeline-vertical {
    padding: 24px 0;
    flex-direction: column;
}

input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    height: 30px;
}

.mud-timeline-vertical .mud-timeline-item {
    padding: 0;
    padding-bottom: 0;
}

.mud-avatar.mud-avatar-medium {
    width: 25px;
    height: 25px;
    font-size: 0.75rem;
}

/*#mud-snackbar-container {
    position: fixed;
    z-index: 1000005;
    pointer-events: none;
}*/

.tooltip {
    z-index: 10005 !important;
}

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

.e-dlg-target.e-scroll-disabled {
    overflow: scroll !important;
}

/*datagrid cells*/

.e-grid .e-rowcell.e-attr {
    white-space: normal;
}

.e-grid .e-headercelldiv {
    font-size: 12px;
    background-color: lightsteelblue;
}

.e-grid .e-rowcell,
.e-grid .e-headercell {
    padding: 2px 4px !important;
}

.e-grid .e-rowcell {
    font-size: 12px;
}

/*datagrid cells*/

/*datagridheader*/

.e-grid .e-gridheader .e-headercell {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.e-grid .e-gridheader .e-sortfilter .e-headercelldiv, .e-grid .e-gridheader .e-stackedheadercelldiv {
    padding: 8px 20px 0 5px;
}

.mud-badge-wrapper.mud-badge-top.right {
    margin-left: 5px;
}

/*datagridheader*/

/*large dialog*/
.e-dialog.e-lib.e-dlg-modal.e-popup.e-control.e-popup-open,
.dialog-lg {
    max-height: 95%;
    z-index: 1000006;
    width: 95%;
    /*height: 95%;*/
    left: 0px;
    top: 0px;
    position: relative;
}
/*large dialog*/

/*table starts*/
.fullfixed {
    overflow-y: hidden;
    max-height: 100%;
}

.fixedHeaderFooter thead th {
    /*top: 0*/
}

.table-btn {
    padding: 0.3px 0.5px !important;
    margin: 0 !important;
    /*display:inline-block;*/
    justify-content: center;
    align-content: center;
}

.e-tab.e-fill .e-tab-header .e-toolbar-items {
    margin-bottom: 1rem;
}

@media (min-width: 600px) {
    .mud-appbar .mud-toolbar-appbar {
        height: var(--mud-appbar-height);
    }
}

.e-summaryrow {
    height: 35px;
}

/*fixed table header footer starts*/
.fixedHeaderFooter {
    position: relative;
    padding-right: 1px;
    padding-left: 1px;
    max-height: 100%;
    /* max-height: calc(90vh - 212px);*/
    overflow-y: auto;
    overflow-x: hidden;
}

    .fixedHeaderFooter thead th,
    .fixedHeaderFooter tfoot tr {
        position: sticky;
        background-color: lightsteelblue;
    }

    .fixedHeaderFooter thead th {
        top: 0;
        border: 1px solid #dee2e6;
    }

    .fixedHeaderFooter tfoot tr {
        bottom: 0
    }

    .fixedHeaderFooter thead {
        /*z-index: 10000 !important;*/
        position: relative;
    }

/*fixed table header footer ends*/

/*table cell wrap*/
.cellnowrap {
    white-space: nowrap;
    display: inline-block;
}

.top-row {
    color: #342E49;
    background-color: rgba(0, 0, 0, 0.075);
}

.greypast {
    /*background-color: rgb(207, 210, 207);*/
    background-color: rgba(255,0,0,.25);
}

.greyhighlight {
    background-color: rgba(128,128,128,.25);
}

.redhighlight {
    background-color: rgb(235, 191, 191, 0.41);
    /* background-color: black;*/
}

.bluehighlight {
    background-color: rgba(0,0,255,.25);
}

.list-group {
    position: relative;
    padding-right: 1px;
    padding-left: 1px;
    max-height: calc(90vh - 212px);
    overflow-y: auto;
    overflow-x: hidden;
}

/*table ends*/
/*
.redhighlight {
    background-color: rgba(255,0,0,.25);
}*/


/* project css starts */


.semimediumDot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.minidot {
    height: 12px;
    width: 12px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.dot {
    height: 18px;
    width: 18px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.mediumDot {
    height: 40px;
    width: 40px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}
/* project css ends */

/*Timeline styles starts*/

.small .e-timeline-dot {
    width: 12px;
    height: 12px;
}

.col-container {
    display: flex;
    width: 100%;
}

.dot-size .x-small .e-dot {
    --dot-size: 12px;
}

.dot-size .small .e-dot {
    --dot-size: 18px;
}

.dot-size .medium .e-dot {
    --dot-size: 24px;
}

.dot-size .large .e-dot {
    --dot-size: 30px;
}

.e-timeline .e-dot {
    border-color: initial !important;
}

.dot-info {
    background-color: #17a2b8 !important;
}

.dot-success {
    background-color: #33cc33 !important;
}

.dot-warning {
    background-color: #ffc107 !important;
}

.dot-error {
    background-color: #dc3545 !important;
}

.dot-default {
    background-color: #6c757d !important;
}

/*Timeline styles ends*/

/*diamond shape starts*/

#diamond {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: #0366d6;
    position: relative;
    top: -5px;
}

    #diamond:after {
        content: '';
        position: absolute;
        left: -5px;
        top: 5px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-color: #0366d6;
    }

/*diamond shape ends*/

/*table cell wrap*/
.cellnowrap {
    white-space: nowrap;
    display: inline-block;
}

.top-row {
    color: #342E49;
    background-color: rgba(0, 0, 0, 0.075);
}


/*html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}*/

a, .btn-link {
    color: #0366d6;
}

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

.content {
    padding-top: 1.1rem;
}

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

.e-datepicker .e-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.invalid-field .e-input {
    outline: 1px solid red !important;
}

.invalid-field .e-input-group-icon {
    border: 1px solid red !important; /* Red border for the icon container */
    background-color: rgba(255, 0, 0, 0.1); /* Optional: Light red background */
    border-left: none; /* To prevent double borders between input and icon */
}

.invalid-field .e-date-icon.e-icons {
    color: red !important; /* Red color for the calendar icon */
}

.invalid-field .e-input-group-icon:hover {
    background-color: #f8d7da;
}

.invalid-field .e-input-group:not(.e-disabled) .e-input-group-icon:hover, .invalid-field .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    background: #f8d7da;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.validField {
    border-color: lawngreen;
}

.invalidField {
    /*background-color: tomato;*/
    border-color: tomato;
}

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


.vl {
    width: 30% !important;
    border-right: 1px solid #e6ecf5;
    float: left;
    min-height: calc(100vh - 212px);
}

.vls {
    width: 20% !important;
    border-right: 1px solid #e6ecf5;
    float: left;
    /*min-height: calc(100vh - 212px);*/
}

.vlthird {
    width: 33% !important;
    border-right: 1px solid #e6ecf5;
    float: left;
}

.vlhalf {
    width: 50% !important;
    border-right: 1px solid #e6ecf5;
    float: left;
}


/* numberlist css starts */

.numberlist ol {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 1em;
    /*overflow-x: hidden;*/
}

    .numberlist ol ol {
        margin: 0 0 0 2em;
    }

.numberlist a {
    position: relative;
    display: block;
    padding: .1em .1em .1em 0.5em;
    *padding: .4em;
    margin: .1em 0;
    background: #FFF;
    color: #444;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
}

    .numberlist a:hover {
        background: #cbe7f8;
        color: blue;
        cursor: pointer;
        padding-right: 1rem;
        /* background: #009DA0; */
        /* opacity: 0.5; */
        text-decoration: underline;
    }

.numberlist .selected {
    background-color: #3E92CC;
    /*background-color: #0075F2;*/
    /*background-color: #9FC6E6;*/
    /*color: #FFFAFF;*/
    color: white;
    /* background: #009DA0; */
    /* opacity: 0.5; */
    text-decoration: underline;
}

.numberlist a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    color: #FFF;
}

/* numberlist css ends */

/* scrollbar starts */

body {
    overflow-x: hidden;
    /* overflow-y: auto; */
}

.ps .ps__scrollbar-y-rail {
    left: 3px;
    right: auto;
}

/* width */
::-webkit-scrollbar {
    height: 5px;
    /* height for horizontal (overflow-y) scrollbar */
    width: 5px;
    /* width for vertical (overflow-x) scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #cccccc;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 5px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #cccccc;
    }

/* scrollbar ends */

/*Vendo table starts*/
.e-grid .e-headercelldiv {
    height: auto !important;
    line-height: normal !important;
}

/* General DataGrid Styling */
.e-grid {
    /* max-width: 1200px; /* Set max width for the grid */ */ margin: 20px auto; /* Center the grid */
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; /* Prevent overflow of rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

    /* Table Header */
    .e-grid .e-headercell, .e-headercell {
        background-color: lightsteelblue;
    }

    .e-grid .e-rightfreeze, .e-grid .e-freezerightborder,
    .e-grid .e-leftfreeze, .e-grid .e-freezeleftborder {
        background-color: lightsteelblue;
    }

    .e-grid .e-detailheadercell, .e-detailheadercell {
        background-color: lightsteelblue;
    }

    .e-grid .e-gridheader {
        background-color: lightsteelblue;
    }

    .e-grid .e-gridheader {
        background-color: #fff;
        border-bottom-color: #dee2e6;
        border-top-color: #dee2e6;
        color: #212529;
    }

    .e-grid .e-headercell.e-removewrap .e-headercelldiv,
    .e-grid .e-rowcell.e-removewrap {
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.e-headercell.e-leftalign.e-leftfreeze.e-freezeleftborder {
    background-color: lightsteelblue;
}

.e-headercell.e-centeralign.e-lastcell.e-rightfreeze.e-freezerightborder {
    background-color: lightsteelblue;
}

/* Table Body */
.e-row {
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

    .e-row:nth-child(even) {
        background-color: #f7f7f7; /* Light gray for even rows */
    }

    .e-row:hover {
        background-color: #e0e0e0; /* Light hover effect */
    }

/* Body Cells */
.e-cell {
    padding: 2px; /* Padding for body cells */
    color: #333; /* Text color */
    border-bottom: 1px solid #ddd; /* Bottom border for body cells */
}

/* Alerts - Highlight Critical Issues */
/*.alert {
    background-color: #ffebee;*/ /* Light red for alert */
/*color: #c62828;*/ /* Dark red text */
/*font-weight: bold;*/ /* Bold text for emphasis */
/*}*/

/* Table Footer */
.e-footer {
    background-color: #f7f7f7; /* Light gray for footer */
    font-weight: bold; /* Bold footer text */
}

/* Footer Cells */
.e-footercell {
    padding: 12px; /* Padding for footer cells */
    border-top: 2px solid #ddd; /* Top border for footer */
}

/* Responsive Styles */
@@media (max-width: 768px) {
    .e-grid {
        font-size: 12px; /* Reduce font size for smaller screens */
    }

    .e-headercell, .e-cell {
        padding: 8px; /* Reduce padding for smaller screens */
    }
}
/*Vendor table ends*/


.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

.sumbox {
    display: inline-block;
    margin: 0 40px 5px 0;
    position: relative;
    vertical-align: top;
}

    .sumbox .sumboxvalue {
        color: inherit;
        font-size: 50px;
        line-height: 50px;
        padding: 0;
        display: block;
        text-align: center;
        font-family: Montserrat, sans-serif;
        font-weight: 100;
    }



/*   Animation*/

.animated-section {
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    max-height: 0;
    opacity: 0;
}

    .animated-section.show {
        max-height: 500px; /* Set a maximum height to accommodate your content */
        opacity: 1;
    }

    .animated-section.hide {
        max-height: 0;
        opacity: 0;
    }


/*.e-tooltip-wrap.e-popup .e-error-tooltip-css {
    background-color: #f0a3a3;
    border: 1px solid #f0a3a3;
}

.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top .e-error-tooltip-css {
    border-bottom: 8px solid #f0a3a3;
}

.e-arrow-tip.e-tip-top .e-error-tooltip-css {
    color: #f0a3a3;
}

.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top .e-error-tooltip-css {
    color: unset;
}*/

.e-tooltip-wrap.e-popup.e-error-tooltip-css {
    background-color: #f0a3a3;
    border: 1px solid #f0a3a3;
}

.e-tooltip-wrap.e-arrow-tip-outer.e-tip-top.e-error-tooltip-css {
    border-bottom: 8px solid #f0a3a3;
}

.e-arrow-tip.e-tip-top.e-error-tooltip-css {
    color: #f0a3a3;
}

.e-tooltip-wrap.e-arrow-tip-inner.e-tip-top.e-error-tooltip-css {
    /*color: unset;*/
    color: #f0a3a3;
}

.e-grid:not(.e-grid-min-height) .e-gridcontent tr td:not(.e-indentcell):first-child:empty, .e-grid:not(.e-grid-min-height) .e-gridcontent tr.e-row .e-rowcell:empty {
    /*height: 34px; */
    height: 14px;
}

tr .rowline td {
    border-bottom: 1pt solid black;
}