/*colors*/
:root {
    --app-black-color: #101010ff;
    --app-dark-color: #282828ff;
    --app-layout-bgcolor: var(--blackcolor);
    --app-window-backdrop-color: #a4ccff30;
    --app-nav-menu-backdrop-color: #282828ee;
    --app-messagebox-backdrop-color: #a4ccff30;
    --app-messagebox-bgcolor: var(--blackcolor);
    --app-messagebox-button1-color: var(--darkcolor);
    --app-messagebox-button2-color: var(--whitefogcolor);
    --app-messagebox-header-end-brcolor: var(--darkcolor);
    --app-table-header-bg-color: var(--blackcolor);
    --app-table-header-color: var(--app-theme-color);
    --app-table-row-bgcolor: var(--blackcolor);
    --app-table-row-color: var(--whitefogcolor);
    --app-table-row-hover-bgcolor: var(--app-black-color);
    --app-table-row-hover-color: var(--app-theme-color);
    --app-theme-color: #ffcca4;
    --app-highlight-color: #a4ccff;
    --app-highlight-transparent-color: #2196F390;
    --app-color: var(--whitefogcolor);
    --app-dimed-text-color: var(--graycolor);
    --app-content-bgcolor: var(--app-dark-color);
    --app-content-brcolor: transparent;
    --app-content-color: var(--whitefogcolor);
    --app-header-bgcolor: var(--app-dark-color);
    --app-header-color: var(--app-theme-color);
    --app-control-bgcolor: var(--blackcolor);
    --app-control-brcolor: var(--darkcolor);
    --app-control-color: var(--whitefogcolor);
    --app-active-bgcolor: var(--app-black-color);
    --app-active-color: var(--app-theme-color);
    --app-disabled-color: var(--mediumgraycolor);
    --app-disabled-bgcolor: var(--darkcolor);
    --app-disabled-brcolor: var(--darkcolor);
    --app-slim-border-color: var(--darkcolor);
    --app-page-header-bgcolor: hsl(from var(--app-layout-bgcolor) h s l / 1);
    --app-page-header-color: var(--app-theme-color);
    --app-modal-border-color: var(--app-highlight-color);
    --app-modal-header-bgcolor: transparent;
    --app-link-color: #d3e3fd;
    --app-highlight2-color: color-mix(in srgb, cyan 40%, white 60%);
}

/*custom properties*/
:root {
    --app-backdrop-filter: none;
    --app-box-shadow-top-bar: 0 1px 3px 0px rgba(0, 0, 0, 0.5);
    --app-scrollbar-width: 8px;
    --app-scrollbar-track-bgcolor: var(--blackcolor);
    --app-scrollbar-thumb-bgcolor: var(--app-highlight-color);
    --app-scrollbar-thumb-hover-bgcolor: var(--app-theme-color);
    color: var(--app-color);
}

/*entities colors*/
:root {
    --entrance-color: var(--lightorangecolor);
    --dashboard-color: var(--lightorangecolor);
    --certificates-color: #A4CCFF;
    --certificates-creation-color: #A4CCFF;
    --report-color: var(--bluecolor);
    --online-devices-color: var(--greencolor);
    --online-settings-color: var(--greencolor);
    --trucks-color: #ADD8E6;
    --truckmodels-color: #C1C1E1;
    --trailers-color: #DAB887;
    --drivers-color: #FFB6C1;
    --products-color: #D8AFD8;
    --sites-color: #6FBF6F;
    --users-color: #FAE78E;
    --scales-color: #AFEEEE;
    --cameras-color: #1ABC9C;
    --customers-color: #FFA07A;
    --devices-color: #4682B4;
}




[data-type-title="truck" i] {
    color: var(--trucks-color) !important;
}

[data-type-title="truckmodel" i] {
    color: var(--truckmodels-color) !important;
}

[data-type-title="trailer" i] {
    color: var(--trailers-color) !important;
}

[data-type-title="driver" i] {
    color: var(--drivers-color) !important;
}

[data-type-title="product" i] {
    color: var(--products-color) !important;
}

[data-type-title="site" i] {
    color: var(--sites-color) !important;
}

[data-type-title="user" i] {
    color: var(--users-color) !important;
}

[data-type-title="scale" i] {
    color: var(--scales-color) !important;
}

[data-type-title="camera" i] {
    color: var(--cameras-color) !important;
}

[data-type-title="customer" i] {
    color: var(--customers-color) !important;
}

[data-type-title="device" i] {
    color: var(--devices-color) !important;
}

[data-type-title="certificate" i] {
    color: var(--certificates-color) !important;
}

/*user roles colors*/
:root {
    --user-role-admin-color: var(--lightorangecolor);
    --user-role-office-color: var(--greencolor);
    --user-role-driver-color: var(--bluecolor);
}

mark {
    color: var(--orangecolor);
    background-color: transparent;
    line-height: normal;
    border-block-end: 1px solid var(--yellowcolor);
}

/* scrollbar */
::-webkit-scrollbar {
    width: var(--app-scrollbar-width);
    height: var(--app-scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--app-scrollbar-track-bgcolor);
}

::-webkit-scrollbar-thumb {
    background: var(--app-scrollbar-thumb-bgcolor);
    border-radius: var(--app-scrollbar-width);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--app-scrollbar-thumb-hover-bgcolor);
}

.no-scroll-bar::-webkit-scrollbar {
    display: none;
}

/* Firefox scrollbar*/
* { 
    scrollbar-color: var(--app-scrollbar-thumb-bgcolor) var(--app-scrollbar-track-bgcolor);
}

* {
    scrollbar-width: thin; 
    scrollbar-color: var(--app-scrollbar-thumb-bgcolor) var(--app-scrollbar-track-bgcolor);
}

.no-scroll-bar {
    scrollbar-width: none;
}


/* add background: linear-gradient(Xdeg, color1, color2); */
.text-gradient-color {
    color: transparent !important;
    background-clip: text !important;
    -moz-background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}


html, body {
    background: var(--blackcolor);
    color-scheme: dark;
}

body {
    overflow: hidden;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: var(--redcolor);
}

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

.app-axles-block {
    display: grid;
    grid-auto-rows: auto;
    line-height: 1;
}