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

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

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


.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.form-control-dark {
    color: #fff;
    background-color: var(--bs-dark);
    border-color: var(--bs-gray);
}

    .form-control-dark:focus {
        color: #fff;
        background-color: var(--bs-dark);
        border-color: #fff;
        box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
    }

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.text-small {
    font-size: 85%;
}

.dropdown-toggle {
    outline: 0;
}

.nav-bg {
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

.mainContnet {
    padding-bottom: 100px;
}
.clickable-row {
    cursor: pointer;
}

.avatar-48 {
    font-size: 20px;
    line-height: 35px;
}
/* Text */


.text-white {
    color: #fff !important
}

.text-light {
    color: #f5f8fa !important
}

.text-primary {
    color: #009ef7 !important
}

.text-secondary {
    color: #e4e6ef !important
}

.text-success {
    color: #50cd89 !important
}

.text-info {
    color: #7239ea !important
}

.text-warning {
    color: #ffc700 !important
}

.text-danger {
    color: #f1416c !important
}

.text-dark {
    color: #181c32 !important
}

.text-body {
    color: #181c32 !important
}

.text-muted {
    color: #a1a5b7 !important
}

.text-black-50 {
    color: rgba(0,0,0,.5) !important
}

.text-white-50 {
    color: rgba(255,255,255,.5) !important
}

.text-reset {
    color: inherit !important
}


/* backgrounds */

.bg-white {
    background-color: #fff !important
}

.bg-light {
    background-color: #f5f8fa !important
}

.bg-primary {
    background-color: #009ef7 !important
}

.bg-secondary {
    background-color: #e4e6ef !important
}

.bg-success {
    background-color: #50cd89 !important
}

.bg-info {
    background-color: #7239ea !important
}

.bg-warning {
    background-color: #ffc700 !important
}

.bg-danger {
    background-color: #f1416c !important
}

.bg-dark {
    background-color: #181c32 !important
}

.fade-background {
    background-color: rgba(255, 255, 255, 0.4)!important;
}


:root {
    --bs-light-primary: #ECF8FF;
    --bs-active-primary: #0095E8;
    --bs-light-success: #E8FFF3;
    --bs-active-success: #47BE7D;
    --bs-light-info: #F8F5FF;
    --bs-active-info: #5014D0;
    --bs-light-warning: #FFF8DD;
    --bs-active-warning: #F1BC00;
    --bs-light-danger: #FFF5F8;
    --bs-active-danger: #D9214E;
    --bs-light-dark: #EFF2F5;
    --bs-active-dark: #131628;
    --bs-gray-100: #F5F8FA;
    --bs-gray-200: #EFF2F5;
    --bs-gray-300: #E4E6EF;
    --bs-gray-400: #B5B5C3;
    --bs-gray-500: #A1A5B7;
    --bs-gray-600: #7E8299;
    --bs-gray-700: #5E6278;
    --bs-gray-800: #3F4254;
    --bs-gray-900: #181C32;
}

.bg-white {
    --bg-color: 255,255,255
}

    .bg-white.hoverable:hover {
        background-color: #f5f8fa !important
    }

.bg-hover-white {
    cursor: pointer
}

    .bg-hover-white:hover {
        --bg-color: 255,255,255;
        background-color: #fff !important
    }

.bg-active-white.active {
    --bg-color: 255,255,255;
    background-color: #fff !important
}

.bg-state-white {
    cursor: pointer
}

    .bg-state-white.active, .bg-state-white:hover {
        --bg-color: 255,255,255;
        background-color: #fff !important
    }

.bg-light {
    --bg-color: 245,248,250
}

    .bg-light.hoverable:hover {
        background-color: #e4e6ef !important
    }

.bg-hover-light {
    cursor: pointer
}

    .bg-hover-light:hover {
        --bg-color: 245,248,250;
        background-color: #f5f8fa !important
    }

.bg-active-light.active {
    --bg-color: 245,248,250;
    background-color: #f5f8fa !important
}

.bg-state-light {
    cursor: pointer
}

    .bg-state-light.active, .bg-state-light:hover {
        --bg-color: 245,248,250;
        background-color: #f5f8fa !important
    }

.bg-light-primary {
    background-color: #ecf8ff !important
}

    .bg-light-primary.hoverable:hover {
        background-color: #cdedff !important
    }

.bg-primary {
    --bg-color: 0,158,247
}

    .bg-primary.hoverable:hover {
        background-color: #0095e8 !important
    }

.bg-hover-light-primary {
    cursor: pointer
}

    .bg-hover-light-primary:hover {
        background-color: #ecf8ff !important
    }

.bg-state-light-primary {
    cursor: pointer
}

    .bg-state-light-primary.active, .bg-state-light-primary:hover {
        background-color: #ecf8ff !important
    }

.bg-hover-primary {
    cursor: pointer
}

    .bg-hover-primary:hover {
        --bg-color: 0,158,247;
        background-color: #009ef7 !important
    }

.bg-active-primary.active {
    --bg-color: 0,158,247;
    background-color: #009ef7 !important
}

.bg-state-primary {
    cursor: pointer
}

    .bg-state-primary.active, .bg-state-primary:hover {
        --bg-color: 0,158,247;
        background-color: #009ef7 !important
    }

.bg-secondary {
    --bg-color: 228,230,239
}

    .bg-secondary.hoverable:hover {
        background-color: #b5b5c3 !important
    }

.bg-hover-secondary {
    cursor: pointer
}

    .bg-hover-secondary:hover {
        --bg-color: 228,230,239;
        background-color: #e4e6ef !important
    }

.bg-active-secondary.active {
    --bg-color: 228,230,239;
    background-color: #e4e6ef !important
}

.bg-state-secondary {
    cursor: pointer
}

    .bg-state-secondary.active, .bg-state-secondary:hover {
        --bg-color: 228,230,239;
        background-color: #e4e6ef !important
    }

.bg-light-success {
    background-color: #e8fff3 !important
}

    .bg-light-success.hoverable:hover {
        background-color: #c9ffe3 !important
    }

.bg-success {
    --bg-color: 80,205,137
}

    .bg-success.hoverable:hover {
        background-color: #47be7d !important
    }

.bg-hover-light-success {
    cursor: pointer
}

    .bg-hover-light-success:hover {
        background-color: #e8fff3 !important
    }

.bg-state-light-success {
    cursor: pointer
}

    .bg-state-light-success.active, .bg-state-light-success:hover {
        background-color: #e8fff3 !important
    }

.bg-hover-success {
    cursor: pointer
}

    .bg-hover-success:hover {
        --bg-color: 80,205,137;
        background-color: #50cd89 !important
    }

.bg-active-success.active {
    --bg-color: 80,205,137;
    background-color: #50cd89 !important
}

.bg-state-success {
    cursor: pointer
}

    .bg-state-success.active, .bg-state-success:hover {
        --bg-color: 80,205,137;
        background-color: #50cd89 !important
    }

.bg-light-info {
    background-color: #f8f5ff !important
}

    .bg-light-info.hoverable:hover {
        background-color: #e3d6ff !important
    }

.bg-info {
    --bg-color: 114,57,234
}

    .bg-info.hoverable:hover {
        background-color: #5014d0 !important
    }

.bg-hover-light-info {
    cursor: pointer
}

    .bg-hover-light-info:hover {
        background-color: #f8f5ff !important
    }

.bg-state-light-info {
    cursor: pointer
}

    .bg-state-light-info.active, .bg-state-light-info:hover {
        background-color: #f8f5ff !important
    }

.bg-hover-info {
    cursor: pointer
}

    .bg-hover-info:hover {
        --bg-color: 114,57,234;
        background-color: #7239ea !important
    }

.bg-active-info.active {
    --bg-color: 114,57,234;
    background-color: #7239ea !important
}

.bg-state-info {
    cursor: pointer
}

    .bg-state-info.active, .bg-state-info:hover {
        --bg-color: 114,57,234;
        background-color: #7239ea !important
    }

.bg-light-warning {
    background-color: #fff8dd !important
}

    .bg-light-warning.hoverable:hover {
        background-color: #fff2be !important
    }

.bg-warning {
    --bg-color: 255,199,0
}

    .bg-warning.hoverable:hover {
        background-color: #f1bc00 !important
    }

.bg-hover-light-warning {
    cursor: pointer
}

    .bg-hover-light-warning:hover {
        background-color: #fff8dd !important
    }

.bg-state-light-warning {
    cursor: pointer
}

    .bg-state-light-warning.active, .bg-state-light-warning:hover {
        background-color: #fff8dd !important
    }

.bg-hover-warning {
    cursor: pointer
}

    .bg-hover-warning:hover {
        --bg-color: 255,199,0;
        background-color: #ffc700 !important
    }

.bg-active-warning.active {
    --bg-color: 255,199,0;
    background-color: #ffc700 !important
}

.bg-state-warning {
    cursor: pointer
}

    .bg-state-warning.active, .bg-state-warning:hover {
        --bg-color: 255,199,0;
        background-color: #ffc700 !important
    }

.bg-light-danger {
    background-color: #fff5f8 !important
}

    .bg-light-danger.hoverable:hover {
        background-color: #ffd6e3 !important
    }

.bg-danger {
    --bg-color: 241,65,108
}

    .bg-danger.hoverable:hover {
        background-color: #d9214e !important
    }

.bg-hover-light-danger {
    cursor: pointer
}

    .bg-hover-light-danger:hover {
        background-color: #fff5f8 !important
    }

.bg-state-light-danger {
    cursor: pointer
}

    .bg-state-light-danger.active, .bg-state-light-danger:hover {
        background-color: #fff5f8 !important
    }

.bg-hover-danger {
    cursor: pointer
}

    .bg-hover-danger:hover {
        --bg-color: 241,65,108;
        background-color: #f1416c !important
    }

.bg-active-danger.active {
    --bg-color: 241,65,108;
    background-color: #f1416c !important
}

.bg-state-danger {
    cursor: pointer
}

    .bg-state-danger.active, .bg-state-danger:hover {
        --bg-color: 241,65,108;
        background-color: #f1416c !important
    }

.bg-light-dark {
    background-color: #eff2f5 !important
}

    .bg-light-dark.hoverable:hover {
        background-color: #dce3e9 !important
    }

.bg-dark {
    --bg-color: 24,28,50
}

    .bg-dark.hoverable:hover {
        background-color: #131628 !important
    }

.bg-hover-light-dark {
    cursor: pointer
}

    .bg-hover-light-dark:hover {
        background-color: #eff2f5 !important
    }

.bg-state-light-dark {
    cursor: pointer
}

    .bg-state-light-dark.active, .bg-state-light-dark:hover {
        background-color: #eff2f5 !important
    }

.bg-hover-dark {
    cursor: pointer
}

    .bg-hover-dark:hover {
        --bg-color: 24,28,50;
        background-color: #181c32 !important
    }

.bg-active-dark.active {
    --bg-color: 24,28,50;
    background-color: #181c32 !important
}

.bg-state-dark {
    cursor: pointer
}

    .bg-state-dark.active, .bg-state-dark:hover {
        --bg-color: 24,28,50;
        background-color: #181c32 !important
    }

.bg-black {
    background-color: #000 !important
}

.bg-opacity-0 {
    background-color: rgba(var(--bg-color),0) !important
}

.bg-hover-opacity-0:hover {
    background-color: rgba(var(--bg-color),0) !important
}

.bg-active-opacity-0.active {
    background-color: rgba(var(--bg-color),0) !important
}

.bg-state-opacity-0 .active, .bg-state-opacity-0:hover {
    background-color: rgba(var(--bg-color),0) !important
}

.bg-opacity-5 {
    background-color: rgba(var(--bg-color),.05) !important
}

.bg-hover-opacity-5:hover {
    background-color: rgba(var(--bg-color),.05) !important
}

.bg-active-opacity-5.active {
    background-color: rgba(var(--bg-color),.05) !important
}

.bg-state-opacity-5 .active, .bg-state-opacity-5:hover {
    background-color: rgba(var(--bg-color),.05) !important
}

.bg-opacity-10 {
    background-color: rgba(var(--bg-color),.1) !important
}

.bg-hover-opacity-10:hover {
    background-color: rgba(var(--bg-color),.1) !important
}

.bg-active-opacity-10.active {
    background-color: rgba(var(--bg-color),.1) !important
}

.bg-state-opacity-10 .active, .bg-state-opacity-10:hover {
    background-color: rgba(var(--bg-color),.1) !important
}

.bg-opacity-15 {
    background-color: rgba(var(--bg-color),.15) !important
}

.bg-hover-opacity-15:hover {
    background-color: rgba(var(--bg-color),.15) !important
}

.bg-active-opacity-15.active {
    background-color: rgba(var(--bg-color),.15) !important
}

.bg-state-opacity-15 .active, .bg-state-opacity-15:hover {
    background-color: rgba(var(--bg-color),.15) !important
}

.bg-opacity-20 {
    background-color: rgba(var(--bg-color),.2) !important
}

.bg-hover-opacity-20:hover {
    background-color: rgba(var(--bg-color),.2) !important
}

.bg-active-opacity-20.active {
    background-color: rgba(var(--bg-color),.2) !important
}

.bg-state-opacity-20 .active, .bg-state-opacity-20:hover {
    background-color: rgba(var(--bg-color),.2) !important
}

.bg-opacity-25 {
    background-color: rgba(var(--bg-color),.25) !important
}

.bg-hover-opacity-25:hover {
    background-color: rgba(var(--bg-color),.25) !important
}

.bg-active-opacity-25.active {
    background-color: rgba(var(--bg-color),.25) !important
}

.bg-state-opacity-25 .active, .bg-state-opacity-25:hover {
    background-color: rgba(var(--bg-color),.25) !important
}

.bg-opacity-50 {
    background-color: rgba(var(--bg-color),.5) !important
}

.bg-hover-opacity-50:hover {
    background-color: rgba(var(--bg-color),.5) !important
}

.bg-active-opacity-50.active {
    background-color: rgba(var(--bg-color),.5) !important
}

.bg-state-opacity-50 .active, .bg-state-opacity-50:hover {
    background-color: rgba(var(--bg-color),.5) !important
}

.bg-opacity-75 {
    background-color: rgba(var(--bg-color),.75) !important
}

.bg-hover-opacity-75:hover {
    background-color: rgba(var(--bg-color),.75) !important
}

.bg-active-opacity-75.active {
    background-color: rgba(var(--bg-color),.75) !important
}

.bg-state-opacity-75 .active, .bg-state-opacity-75:hover {
    background-color: rgba(var(--bg-color),.75) !important
}

.bg-opacity-100 {
    background-color: rgba(var(--bg-color),1) !important
}

.bg-hover-opacity-100:hover {
    background-color: rgba(var(--bg-color),1) !important
}

.bg-active-opacity-100.active {
    background-color: rgba(var(--bg-color),1) !important
}

.bg-state-opacity-100 .active, .bg-state-opacity-100:hover {
    background-color: rgba(var(--bg-color),1) !important
}

.bg-lighten {
    background-color: rgba(245,248,250,.5) !important
}

.bg-hover-lighten {
    cursor: pointer
}

    .bg-hover-lighten:hover {
        background-color: rgba(245,248,250,.5) !important
    }

.bg-active-lighten.active {
    background-color: rgba(245,248,250,.5) !important
}

.bg-state-lighten {
    cursor: pointer
}

    .bg-state-lighten.active, .bg-state-lighten:hover {
        background-color: rgba(245,248,250,.5) !important
    }

.hoverable {
    cursor: pointer;
    transition: all .2s ease
}

    .hoverable:hover {
        transition: all .2s ease
    }

.bgi-no-repeat {
    background-repeat: no-repeat
}

.bgi-position-y-top {
    background-position-y: top
}

.bgi-position-y-bottom {
    background-position-y: bottom
}

.bgi-position-y-center {
    background-position-y: center
}

.bgi-position-x-start {
    background-position-x: left
}

.bgi-position-x-end {
    background-position-x: right
}

.bgi-position-x-center {
    background-position-x: center
}

.bgi-position-top {
    background-position: 0 top
}

.bgi-position-bottom {
    background-position: 0 bottom
}

.bgi-position-center {
    background-position: center
}

.bgi-size-auto {
    background-size: auto
}

.bgi-size-cover {
    background-size: cover
}

.bgi-size-contain {
    background-size: contain
}

.bgi-attachment-fixed {
    background-attachment: fixed
}

.bgi-attachment-auto {
    background-attachment: auto
}