@font-face {
    font-family: 'Poppins';
    src: url('poppins/Poppins-Regular.ttf') format('truetype');
}

body,
h1,
body {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

h2,
h3 {
    margin: 0;
    padding: 0;
}

a {
    color: #528dee;
    text-decoration: none;
}

    a:hover {
        color: #1565c0;
    }

    a:not([href]):not([class]), a:not([href]):not([class]):hover {
        color: inherit;
        text-decoration: none;
    }

app body {
    font-family: "Poppins";
    color: #060E40;
}

h1 {
    font-family: "Poppins";
    font-size: 1.6rem;
    font-weight: 400;
}

h2 {
    font-family: "Poppins";
    font-size: 1.2rem;
    font-weight: 200;
    padding: 10px 0 20px 0;
    color: #444;
}

h3 {
    font-family: "Poppins";
    font-size: 1.1rem;
    font-weight: 400;
}

h4 {
    font-family: "Poppins";
    font-size: 1.1rem;
}

h5 {
    font-family: "Poppins";
    font-size: 1.1rem;
}

p {
    font-family: "Poppins";
    font-size: 1rem;
}

a {
    font-family: "Poppins";
    font-size: 1rem;
}

@media (min-width: 480px) {
    h1 {
        font-size: 1.5rem;
        font-weight: 400;
    }

    h2 {
        font-size: 1.25rem;
        font-weight: 200;
    }
}

@media (min-width: 768px) {
    h1 {
        font-size: 1.75rem;
        font-weight: 400;
    }

    h2 {
        font-size: 1.75rem;
        font-weight: 200;
    }
}

.btn {
    font-family: Poppins;
}

.btn.btn-primary.k-button,
.btn.btn-outline-primary.k-button{
    line-height: 1;
    padding: 11px 16px;
    border: none;
}

    .btn.btn-outline-primary.k-button{
        border: 2px solid;
        box-sizing: border-box;
        background: none;
    }

    .btn.btn-primary.k-button:hover {
        background-color: #0069d9;
    }

    .btn.btn-outline-primary:hover,
    .btn.btn-outline-primary.k-button:hover {
        background-color: #0069d9;
        border: 2px solid #1565c0;
        color: #ffffff;
        background-image: linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.12));
    }

.btn-light {
   
}

    .btn-light:hover, .btn-light:focus, .btn-light:active, .open > .dropdown-toggle.btn-light {
        color: white !important;
        background-color: #1565c0 !important;
        border-color: #1565c0 !important; /*set the color you want here*/
    }

a.btn-primary,
button.btn-primary {
    color: #fff;
    background-color: #1565c0;
}

a.btn.btn-outline-primary,
button.btn.btn-outline-primary {
    font-family: Poppins;
    color: #1565c0;
    border: 2px solid;
    box-sizing: border-box;
    border: 2px solid #1565c0;
}

.btn-outline-primary:hover {
    color: #fff;
}

p.value {
    margin-bottom: 0;
}

.header {
    position: fixed;
    width: 100%;
    height: 80px;
    background-blend-mode: luminosity;
    background-color: #ffffff;
    box-shadow: 0 0 40px 0 rgba(82,63,105,.1);
    z-index: 5;
}

    .header .nav-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        color: #ffffff;
    }

    .header .information {
        flex: 0 0 24px;
        text-align: center;
    }

    .header .menu-button, .header .settings {
        flex: 0 0 48px;
        text-align: center;
    }

    .header .k-button {
        border: none;
        background-color: transparent;
        background-image: none;
        color: #5867dd;
    }

        .header .k-button:hover {
            background-color: #ebebeb;
            padding: 5px;
            border-radius: 50%;
        }

    .header .btn-link {
        color: #528dee;
        text-decoration: none;
    }

        .header .btn-link:hover { color: #1565c0; }

        .header a.btn-link:not([href]):not([class]), .header a.btn-link:not([href]):not([class]):hover {
            color: inherit;
            text-decoration: none;
        }

    .header .nav-link.nav-text {
        display: inline-block;
        color: #616161
    }

    .header .title {
        flex: 1 0 auto;
        flex-direction: column;
        align-items: flex-start;
    }

        .header .title h1 {
            font-size: 1.8em;
            margin-bottom: 0;
            color: #616161;
        }

        .header .title h2 {
            font-size: 1em;
            margin-bottom: 0;
            color: #616161;
            padding: 0;
        }

    .header .k-avatar {
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 25px;
        box-shadow: 0 0 0px 1px #ffffff;
    }

        .header .k-avatar img {
            width: 40px;
            height: 40px;
        }

@media (min-width: 480px) {
    .header .title {
        flex-direction: row;
        align-items: center;
    }

    .header .vl {
        border-left: 1px solid #ffffff;
        height: 25px;
        margin: 6px 15px;
    }
}

.k-drawer-container {
    padding: 86px 12px 6px 12px;
    min-height: calc(100vh);
}

    .k-drawer-container .k-drawer {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-right-width: 0 !important;
    }

@media (min-width: 768px) {
    .k-drawer-container {
        padding: 86px 24px 6px 24px;
    }
}

navigation.mainNav header {
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}

    navigation.mainNav header h1 {
        font-size: 20px;
        width: 100px;
        color: #616161;
    }

    navigation.mainNav header button {
        border: none;
        background-image: none;
        background-color: #ffffff;
        margin-left: 6px;
        border-radius: 25px;
    }

        navigation.mainNav header button .k-icon {
            color: #5867dd;
            font-size: 20px;
        }
.homepageActions {
    text-align: center;
    padding-bottom: 20px;
}

@media (min-width: 768px) {
    .homepageActions {
        text-align: left;
    }
}

        .homepageActions button {
            margin-left: 10px;
        }

            .homepageActions button:first-child {
                margin-left: 0;
            }

    .loading-panel-wrapper {
        padding-top: 40px;
        text-align: center;
    }

    .k-drawer-items .title {
        display: none;
        text-transform: uppercase;
        font-size: 1em;
        padding: 1em;
        font-weight: bold;
        color: #528dee;
    }

    .k-drawer-items > header {
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 1em;
    }

        .k-drawer-items > header > img {
            border: 2px solid #5abf90;
            margin: 1em;
            max-width: 96px;
        }

    .k-drawer-items button {
        justify-content: normal;
        background-color: #ffffff;
        background-image: none;
        border: none;
        border-radius: 0;
        font-size: 17px;
    }

        .k-drawer-items button:hover,
        .k-drawer-items button:active {
            background-color: rgba(88,103,221,0.1);
            background-image: none;
        }

        .k-drawer-items button > .k-icon {
            color: #5867dd;
        }

    .k-window {
        min-width: 300px;
    }

    .k-dialog-titlebar {
        background-color: #1565c0;
    }

    /*  Here we capture if the drawer is expanded.
    If the drawer is in mini-mode, these items
    are hidden by default.
*/
    .k-drawer-expanded .k-drawer-items > header, .k-drawer-expanded .k-drawer-items .title {
        display: flex;
    }

    .card-container {
        background-color: #F2F2F2;
        padding: 40px 0;
        text-align: center;
    }

        .card-container.grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            column-gap: 10px;
            row-gap: 1em;
        }

        .card-container .card-buttons .k-button {
            min-width: 105px;
        }

        .card-container .card-ranges .k-daterangepicker .k-textbox-container, .card-container .card-ranges .k-daterangepicker .k-floating-label-container {
            padding-top: 0;
            min-width: 105px;
        }

        .card-container .card-ranges .k-daterangepicker .k-label {
            display: none;
        }

        .card-container .card-component {
            grid-column: 1 / -1;
        }

    @media (min-width: 480px) {
        .card-container {
            text-align: initial;
            padding: 30px;
        }

            .card-container.grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .card-container .card-title {
                grid-column: 1 / 2;
                grid-row: 1;
            }

            .card-container .card-buttons {
                text-align: center;
                grid-column: 1 / -1;
                grid-row: 2;
            }

            .card-container .card-ranges {
                text-align: right;
                grid-column: 2 / 3;
                grid-row: 1;
            }
    }

    @media (min-width: 768px) {
        .card-container {
            margin: 25px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

            .card-container.grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .card-container .card-buttons {
                text-align: center;
                grid-column: 2 / 3;
                grid-row: 1;
            }

            .card-container .card-ranges {
                text-align: right;
                grid-column: 3 / 4;
            }

            .card-container .card-component {
                grid-column-start: 1;
                grid-column-end: -1;
            }
    }

    .formWrapper {
        margin-bottom: 10px;
    }

    .k-loader-primary {
        color: #1565c0;
    }

    .container-size {
        width: 100vw;
        height: 100vh;
    }

    .dashboard-page .card-container:last-of-type {
        padding-top: 0;
    }

    .dashboard-page .k-grid-toolbar .k-textbox {
        margin-bottom: 10px;
    }

    @media (min-width: 480px) {
        .dashboard-page .k-grid-toolbar .k-textbox {
            margin-bottom: 0;
            float: left;
        }

        .dashboard-page .k-grid-toolbar .k-button {
            float: right;
        }
    }

    .k-grid {
        margin: 18px 0;
    }

    @media (min-width: 768px) {
        .dashboard-page .card-container:last-of-type {
            padding-top: 30px;
        }
    }

    .planning-page .card-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .planning-page .card-title {
        grid-column: 1 / -1;
    }

    .planning-page .k-hbox {
        padding: 0 20px;
        background: transparent;
    }

    .planning-page .k-avatar {
        width: 41px;
        height: 41px;
    }

    .planning-page .k-card-title {
        font-size: 15px;
        margin-bottom: -6px;
        text-align: left;
    }

    .planning-page .k-card-subtitle {
        margin-top: 0;
        text-transform: uppercase;
        font-size: 11px;
    }

    .planning-page .disabled {
        opacity: 0.5;
    }

    @media (min-width: 480px) {
        .planning-page .card-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 768px) {
        .planning-page .k-hbox {
            padding: 0;
            border-width: 0;
        }
    }

    @media (min-width: 960px) {
        .planning-page .card-container {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1360px) {
        .planning-page .card-container {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    .profile-page .card-container {
        text-align: left;
    }

    .profile-page .k-form .k-form-field {
        display: block;
        padding: 0 15px;
    }

    .profile-page .k-form-field:first-of-type .k-form-field-wrap {
        margin: auto;
    }

    .profile-page .k-form-field:first-of-type .k-avatar {
        margin: 0 auto 1rem;
    }

    .profile-page .k-form.k-form-horizontal .k-label {
        width: 100%;
    }

    .profile-page hr {
        margin-top: 1rem;
        opacity: 0.2;
    }

    .profile-page .k-form .k-form-buttons {
        justify-content: center;
    }

        .profile-page .k-form .k-form-buttons > * {
            min-width: 140px;
        }

    @media (min-width: 480px) {
        .profile-page .k-form .k-form-field {
            display: flex;
        }

        .profile-page .k-form-field:first-of-type .k-avatar {
            margin: 0;
        }

        .profile-page .k-form.k-form-horizontal .k-label {
            width: 25%;
        }
    }

    @media (min-width: 768px) {
        .profile-page .k-form {
            margin: 0 auto;
            padding: 0;
        }

            .profile-page .k-form .k-form-field {
                padding: 0;
            }
    }

    .center-cell {
        text-align: center !important;
    }

    .small-grid {
        max-height: 400px;
    }

    .btn-grid {
        border: none;
        background: #fafafa;
        font-size: 15px;
        width: 25px;
        height: 35px;
        border-radius: 25px;
        color: #5867dd;
    }

        .btn-grid:hover {
            background: #5867dd;
            color: #ffffff;
        }

    .gridRowDetails {
        padding-bottom: 10px;
    }

        .gridRowDetails > p {
            display: block;
            font-size: 14px;
            margin-bottom: 5px;
        }

    .gridRowActions {
        text-align: right;
    }

        .gridRowActions > * {
            margin-right: 8px;
        }

        .gridRowActions *:last-child {
            margin-right: 0;
        }

.gridItemActionsContainer {
    display: inline-grid;
    grid-template-columns: 1fr;
}

        .gridItemActionsContainer button {
            width: 100%;
        }

    @media (min-width: 650px) {
        .gridItemActionsContainer button {
            width: auto;
        }
        .gridItemActionsContainer {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (min-width: 950px) {
        .gridItemActionsContainer button {
            width: auto;
        }
        .gridItemActionsContainer {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

@media (min-width: 1200px) {
    .gridItemActionsContainer button {
        width: auto;
    }

    .gridItemActionsContainer {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.k-pager-numbers a.k-link.k-state-selected {
    color: #1565C0;
    background-color: rgba(88,103,221,0.1);
}

    ul.k-tabstrip-items .k-link {
        padding: 12px;
    }

    ul.k-tabstrip-items .k-item {
        color: rgba(88,103,221,0.3);
    }

        ul.k-tabstrip-items .k-item.k-state-active,
        ul.k-tabstrip-items .k-item.k-state-selected {
            color: #1565c0;
        }

        ul.k-tabstrip-items .k-item:hover,
        ul.k-tabstrip-items .k-item.k-state-hover {
            color: #1565c0;
        }

    @media(min-width: 601px) {
        ul.k-tabstrip-items .k-item .k-link i {
            padding-right: 10px;
        }
    }

    .form-group.row button.btn {
        margin-left: 20px;
    }

    span.k-floating-label-container,
    div.k-numerictextbox {
        width: 100%;
    }

.k-textbox,
.k-dropdown,
.k-datepicker,
.k-timepicker,
.k-editor,
.k-datetimepicker {
    width: 100% !important;
}

.k-radio:checked,
.k-checkbox:checked {
    border-color: #1565c0;
    background-color: #1565c0;
}

.k-button.k-state-selected,
.k-list.k-reset .k-item.k-state-selected,
.k-list.k-reset .k-item.k-state-focused {
    background-color: #1565c0;
    border-color: #033e81;
}

.control-label {
    font-family: Poppins;
    color: #444;
}
    .control-label.label-title {
        font-weight: 600;
    }

    label.mandatory:after {
        content: '*';
        color: red;
        margin-left: 5px;
    }

    @media (min-width: 570px) {
        .k-textbox, .k-dropdown, .k-dateinput, .k-datepicker, .k-timepicker, span.k-floating-label-container, div.k-numerictextbox,
        .k-datetimepicker {
            width: 320px !important;
        }

        .k-editor {
            width: 400px !important;
        }
    }




    #blazor-error-ui {
        background: #ffd452;
        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 .reload {
            font-weight: bold;
        }

        #blazor-error-ui .dismiss {
            cursor: pointer;
            position: absolute;
            right: 0.75rem;
            top: 0.5rem;
        }

    .docs-wrapper {
        height: 50vh;
    }

        .docs-wrapper h2 {
            font-size: 1.5rem;
        }

        .docs-wrapper h3 {
            font-size: 1.25rem;
        }

        .docs-wrapper a {
            color: #528dee;
            text-decoration: none;
        }

            .docs-wrapper a:hover {
                text-decoration: underline !important;
            }

    .k-tilelayout {
        background-color: transparent;
    }

    .image-cell {
        display: flex;
        align-items: center;
    }

        .image-cell > img {
            margin-right: 10px;
        }

    .card-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: right;
        margin: 30px;
    }

    .card-description {
        min-height: 4em;
    }

    .card-menu > .k-card {
        width: 280px;
        margin-right: 2em;
    }

    a.k-link.k-state-selected {
        border-radius: 5px;
    }

    .validation-message {
        color: #F26666;
    }

    .k-window {
        border-radius: 3px;
    }

    .k-window-titlebar {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

.k-window-titlebar .k-icon {
    color: #fff;
}

    .k-window-title,
    .k-dialog-title {
        font-family: Poppins;
    }

.k-edit-label,
.k-edit-field {
    width: 100%;
}

.k-edit-label {
    margin-bottom: 0;
    padding: 0;
    text-align: left;
}
    .k-edit-label label {
        font-weight: 600;
        color: #444;
        font-size: .75rem;
        font-family: Poppins;
    }

    @media (max-width: 570px) {
        .k-window {
            width: 98%;
        }

        .k-edit-form-container {
            width: 100%;
            min-width: 300px;
        }
    }

    .k-calendar .k-calendar-td.k-state-selected .k-link, .k-button.k-primary {
    background-color: #1565c0;
    border-color: #033e81;
}

.k-time-header .k-time-now,
.k-calendar .k-nav-today {
    color: #1565c0;
}

.full-screen > h1 {
    padding: 1em;
    background-color: #F2F2F2;
}

    .rating-readonly {
        pointer-events: none;
    }

    .tile-layout-style {
        max-width: 800px;
    }


.k-grid tr.no-children td.k-hierarchy-cell * {
    display: none;
}


div.smallerFont, div.smallerFont .k-filtercell * {
    font-size: 10px;
}

div.smallerFont .k-dropdown.k-header.k-dropdown-operator {
    width: calc(8px + 2em) !important;
}

div.smallerFont .k-grid-edit-cell input {
    font-size: 10px;
}

.k-pager-numbers .k-link {
    color:#1565C0;
    
}

    .k-pager-numbers .k-link:hover, .k-pager-numbers .k-link.k-state-hover {
        
        background-color: transparent;

    }

    .k-pager-numbers .k-link:focus, .k-pager-numbers .k-link.k-state-focus {
        box-shadow: inset 0 0 0 2px #1565C0
    }

    a.k-link:hover {
        color: #1565C0 !important;
    }

/*dialog warning message*/
.oe-dialog-text {
    color: black;
    font-size: small;
}

.oe-color-red {
    color: var(--red); /*use palette variable*/
}