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

:root {
    --blue: #5E50F9;
    --indigo: #6610f2;
    --purple: #6a008a;
    --pink: #E91E63;
    --red: #f96868;
    --orange: #f2a654;
    --yellow: #f6e84e;
    --green: #46c35f;
    --teal: #58d8a3;
    --cyan: #57c7d4;
    --white: #ffffff;
    --gray: #6c757d;
    --gray-dark: #0f1531;
    --blue: #5E50F9;
    --indigo: #6610f2;
    --purple: #6a008a;
    --pink: #E91E63;
    --red: #f96868;
    --orange: #f2a654;
    --yellow: #f6e84e;
    --green: #46c35f;
    --teal: #58d8a3;
    --cyan: #57c7d4;
    --white: #ffffff;
    --gray: #434a54;
    --gray-light: #aab2bd;
    --gray-lighter: #e8eff4;
    --gray-lightest: #e6e9ed;
    --black: #000000;
    --primary: #374ad7;
    --secondary: #7987a1;
    --success: #10b759;
    --info: #66d1d1;
    --warning: #fbbc06;
    --danger: #ff3366;
    --light: #ececec;
    --dark: #282f3a;
    --primary-muted: #b1cfec;
    --info-muted: #7ee5e5;
    --danger-muted: #f77eb9;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

body {
    font-family: "Nunito", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color: #000;
    text-align: left;
    background-color: #fff;
}

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

/* Extended */
.dxbl-group-header {
    background-color: var(--bs-border-color) !important;
}

.dxbl-grid-header-row {
    background-color: var(--bs-border-color) !important;
}

.login-bg {
    background-color: white;
    background-image: linear-gradient(to right, rgb(44, 22, 84) 50%, rgba(0,0,0,0) 20%);
    background-size: cover;
    height: 100vh;
}

.btn-primary {
    /*background-color: rgb(44, 22, 84) !important;*/
    /*background-color: #374ad7 !important;*/
}

.btn-outline-primary {
    border-color: rgb(44, 22, 84) !important;
    color: rgb(44, 22, 84) !important;
}

    .btn-outline-primary:hover {
        color: white !important;
        background-color: rgb(44, 22, 84) !important;
    }

/** {
    font-family: Nunito Sans !important;
}*/

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    height: calc(2.5rem + 2px);
    width: calc(16rem);
    line-height: 1;
}

.login-logo1 {
    position: absolute;
    top:40px;
    right: 65px;
}

.login-logo2 {
    position: relative;
    top: 75px;
    right: 50px;
}

.login-logo3 {
    position: absolute;
    top: 340px;
    right: 45px;
}

.watermark {
    position:absolute;
    top:70px;
    right:50px;
    opacity: 0.25;
    font-size: 3em;
    text-decoration-line: underline overline;
    z-index: 1000;
    transform: rotate(30deg);
}

.dxbl-btn-primary {
    color: #fff;
    background-color: #374ad7 !important;
    border-color: #3645f1;
    --dxbl-btn-hover-background: none !important;
}

.dxbl-btn.dxbl-btn-primary:hover {
    color: #fff;
    background-color: #4250f2 !important;
    border-color: #3645f1;
}

.dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > th {
    border-top-width: 0;
    color: #fff;
    background-color: #374ad7;
    line-height: 1;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
}

.dxbl-fl .dxbl-fl-cpt {
    font-family: "Nunito", sans-serif;
}

/* Dashboard */
.welcome {
    background-image: url(../images/Welcome.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: block;
    overflow: auto;
    color: white;
}


/***** Ant Design Blazor *****/

/* imitate DxGrid's header row */
.ant-table-thead > tr > th {
    color: #fff !important;
    background-color: #374ad7 !important;
}


/***** Ant Design Blazor *****/


/***** MainLayout.razor *****/

.logo {
    height: 32px;
    margin: 16px;
    background: white;
}

.site-layout-content {
    background: rgba(255, 255, 255, 0);
    padding: 30px;
    min-height: calc(100vh - 134px);
    border-radius: 8px;
    margin: 16px;
}

@media (max-width: 770px) {
    .site-layout-content {
        padding: 10px 5px;
        margin: 0px;
    }
}

.custom-button {
    width: 100%;
    margin-bottom: 16px;
}

.ant-layout {
    background: white !important;
}

/***** MainLayout.razor *****/