@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --sidebar-open-width: 260px !important;
}

html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    height: 100vh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

main {
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.button-link {
    text-decoration: unset;
}

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


.btn-rounded {
    border-radius: 10rem;
}

.welcome-card-img {
    display: inline-block;
    max-width: 100%;
    color: var(--bs-primary);
}


::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
}

.main {
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}

.toggle-btn {
    background-color: transparent;
    cursor: pointer;
    border: 0;
}

    .toggle-btn.left {
        padding-right: 1.5rem;
    }

    .toggle-btn.right {
        padding-left: 1.5rem;
    }

    .toggle-btn i {
        font-size: 1rem;
    }

.arch-sidebar-logo {
    margin: auto 0;
    color: var(--bs-btn-color) !important;
}

    .arch-sidebar-logo a {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--bs-btn-color) !important;
    }

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

    .row > * {
        flex-shrink: 0;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
        margin-top: var(--bs-gutter-y) !important;
    }



.credit-card {
    height: 200px;
    border-radius: 15px;
    transition: all 0.3s ease;
    max-height: 380px;
}

    .credit-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

.card-number {
    font-size: 1.4rem;
    letter-spacing: 2px;
}

.card-holder {
    text-transform: uppercase;
}

form {
    height: 95% !important;
}

.dxbl-fl {
    height: 95% !important;
}

.dxbl-html-editor {
    height: 90% !important;
}

.dashboard-icon {
    display: flex;
    align-content: center;
    justify-content: center;
    height: 42px;
    width: 42px;
    flex-wrap: wrap;
    border-radius: 4px;
}

    .dashboard-icon .i {
        display: inline-block;
        width: 100%;
    }

.quicknav-icon {
    display: flex;
    align-content: center;
    justify-content: center;
    height: 100px;
    width: 100%;
    flex-wrap: wrap;
    border-radius: 4px;
}

    .quicknav-icon i {
        font-size: 82px;
        display: inline-block;
        width: 100%;
    }


.statborder {
    position: relative;
    border: none;
}

    .statborder::after {
        position: absolute;
        width: 100%;
        height: 12px;
        content: "";
    }

    .statborder::after {
        right: 0;
        bottom: 0px;
        border-right: 2px solid black;
        border-bottom: 2px solid black;
        border-left: 2px solid black;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }

    .statborder.success::after {
        right: 0;
        bottom: 0px;
        border-right: 2px solid var(--bs-success) !important;
        border-bottom: 2px solid var(--bs-success) !important;
        border-left: 2px solid var(--bs-success) !important;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        content: "";
    }

    .statborder.info::after {
        right: 0;
        bottom: 0px;
        border-right: 2px solid var(--bs-info) !important;
        border-bottom: 2px solid var(--bs-info) !important;
        border-left: 2px solid var(--bs-info) !important;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        content: "";
    }

    .statborder.secondary::after {
        right: 0;
        bottom: 0px;
        border-right: 2px solid var(--bs-secondary) !important;
        border-bottom: 2px solid var(--bs-secondary) !important;
        border-left: 2px solid var(--bs-secondary) !important;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        content: "";
    }

    .statborder.warning::after {
        right: 0;
        bottom: 0px;
        border-right: 2px solid var(--bs-warning) !important;
        border-bottom: 2px solid var(--bs-warning) !important;
        border-left: 2px solid var(--bs-warning) !important;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        content: "";
    }

    .statborder.danger::after {
        right: 0;
        bottom: 0px;
        border-right: 2px solid var(--bs-danger) !important;
        border-bottom: 2px solid var(--bs-danger) !important;
        border-left: 2px solid var(--bs-danger) !important;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        content: "";
    }

    .statborder.primary::after {
        right: 0;
        bottom: 0px;
        border-right: 2px solid var(--bs-primary) !important;
        border-bottom: 2px solid var(--bs-primary) !important;
        border-left: 2px solid var(--bs-primary) !important;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        content: "";
    }

.card.scroller {
    overflow: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    height: 84vh;
}

.themeswitcher-container {
    top: calc(93vh * -1) !important;
}

.nohref {
    cursor: pointer;
}


.alert .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}


.home-content {
    max-height: calc(100% - 58px)!important;
}
footer {
    max-height: 54px !important;
}

.archpage {
    max-height: calc(100% - 54px) !important;
    height: calc(100% - 54px) !important;
}