@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto:wght@400;600;700;900&display=swap');

:root {
    --primary-oxford-blue: #1E325C;
    --primary-oxford-blue-200: #9eaec9;
    --primary-oxford-blue-50: #e8ebf2;
    --primary-orange-web: #FCA311;
    --primary-platinum: #E5E5E5;
    --primary-black: #000;
    --primary-white: #fff;
    --success-color: #4BB543;
    --error-color: red;
    --colorTextDisabled: #a19f9d;
    --colorInputBackgroundDisabled: #f3f2f1;
    --navbar-top-height: 3.5rem;
    --sidebar-open-padding-width: 265px;
    --sidebar-closed-padding-width: 0;
    --blockquote-bg-color: #fff6e0;
    --blockquote-border-color: #fff6e0;
    --selected-border-color: var(--primary-oxford-blue);
    --lighter-primary-orange-web: #FCA31130;
    --lighter-primary-oxford-blue: rgba(30, 50, 92, .15);
    --loading-spinner-width: 40px;
    --colorSecondaryGray: rgba(0, 0, 0, 0.45);
    --primary-default: var(--bc-disabled);

}


/*Fonts*/



html, body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: var(--primary-platinum);
}

h1,h2,h3,h4,h5,h6 {
    font-family: Nunito, sans-serif;
}

p button {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

code {
    color: var(--primary-oxford-blue);
    font-size: inherit;
}

.fa-solid {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

#app {
    position: relative;
    /*display: flex;*/
    flex-direction: column;
}



.content {
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    grid-area: main;
}

.main-body {
    flex: 1;
    grid-area: main-body;
}

.table th:last-child,
.table td:last-child {
    min-width: auto;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

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

.invalid {
    outline: 1px solid var(--bc-error);
}

#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;
}
@media (max-width: 767.98px) {
    /*.main .top-row:not(.auth) {*/
    /*    display: none;*/
    /*}*/
    
    /*.main .top-row.auth {*/
    /*    justify-content: space-between;*/
    /*}*/
    
    /*.main .top-row a, .main .top-row .btn-link {*/
    /*    margin-left: 0;*/
    /*}*/

    .content {
        margin-left: 0px;
    }
}

@media (min-width: 768px) {
    #app {
        flex-direction: row;
    }

    /*.main .top-row {*/
    /*    padding: 0 24px;*/
    /*    background-color: #fff;*/
    /*    -webkit-box-shadow: 0 0 35px 0 rgba(154,161,171,.15);*/
    /*    box-shadow: 0 0 35px 0 rgba(154,161,171,.15);*/
    /*    min-height: 70px;*/
    /*    position: fixed;*/
    /*    left: 250px;*/
    /*    top: 0;*/
    /*    right: 0;*/
    /*    z-index: 1001;*/
    /*}*/

    /*    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }*/

    .navbar-toggler {
        display: none;
    }
}





    .breadcrumb {
        background-color: transparent;
    }

.breadcrumb-link {
    color: var(--background-color);
    font-weight: 500;
}

    .breadcrumb-link:hover {
        color: var(--primary-color);
    }

.e-print::before {
    content: "\1f5b6";
}

.alert-layer {
    position: fixed;
    top: 30%;
    left: 50%;
    width: 300px;
    max-width: 400px;
    z-index: 10000;
}

.form-item-content {
    display: block;
    overflow-wrap: anywhere;
    font-weight: 550;
    min-height: 30px;
}

.page {
    display: grid;
    height: 100vh;
    grid-template-rows: auto auto 2fr;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
            "banner banner"
        "top-bar top-bar"
        "side-nav main"
}

.page-basic {
    display: grid;
    height: 100vh;
}

.page-body {
    display: flex;
    flex: 1;
}

@media (max-width: 992px) {
    .page {
        grid-template-areas:
        "banner"
        "top-bar"
        "main"
        "aside"
        "footer";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto auto;
    }
    
    .footer-layout {
        grid-area: footer;
    }
}

.bc-blockquote .title {
    font-weight: 600;
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 1.0em;
}

.bc-blockquote p {
    font-size: 14px;
    margin-bottom: 0;
}

.bc-blockquote {
    padding: 1rem;
    margin: 0 0;
    background-color: var(--blockquote-bg-color);
    border: 0.5px solid var(--blockquote-border-color);
    text-align: left;
}

.bc-blockquote-content-horizontal {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.header {
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 20px 40px;
    flex-direction: column;
}

footer {
    margin-top: 33px;
    box-sizing: border-box;
}

.centered-main {
    box-sizing: border-box;
    display: flex;
    text-align: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    flex-grow: 1;
    height: 100%;
}

.centered-main .centered-container {
    margin:20px; 
    max-width: 500px;
}

/* <Menu> */



.sidebar .chevron-icon {
    font-size: 12px !important;
}

.sidebar .oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}





/* Nav Item */

.sidebar .nav-item {
    font-size: 0.9rem;
}

.sidebar .nav-item:last-of-type {
    padding-bottom: 1rem;
}

.sidebar .nav-item ::deep a {
    color: var(--primary-white);
    border-radius: 4px;
    height: 2.5rem;
    display: flex;
    align-items: center;
    line-height: 2.5rem;
}
.sidebar .nav-item .subMenu ::deep a {
    height: 32px;
    line-height: 32px;
}

.sidebar .nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}
.sidebar .nav-item ::deep a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.sidebar .nav-link.flex {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
}

.nav-item-name {
    flex: 1 1 auto;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    pointer-events: none;
    font-weight: 600;
}

ul.nav.flex-column.subMenu {
    margin-left: 2rem;
}

/*-----------*/

.nav-body-content {
    margin-top: 1.2rem;
}

/* Info Wrapper */
.info-wrapper {
    font-size: 0.9em;
    margin-left: 5px;
    padding: 0.5rem 0.6rem;
    position: relative;
    width: 295px;
    color: white;
}

.sidebar .info-wrapper:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px solid currentColor;
    opacity: 0.15;
}

/*-----------------------------*/

@media (min-width: 992px) {
    .sidebar {
        display: flex;
    }
}

@media (max-width: 992px) {
    .sidebar.collapse {
        display: none;
    }
}

.command-shipped-filter.bc-input {
    width: 220px;
    background-color: transparent;
    border-style: none;
    border-width: 0;
    margin-right: 8px;
}

.modal-title-description {
    color: var(--colorSecondaryGray);
    margin: 0;
}


/* Integration pages */

.integration-card-content {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    column-gap: 8px;
}

.integration-card-content img {
    overflow: hidden;
    min-height: 100px;
    max-height: 140px;
}

.integration-card i {
    width: auto;
    font-size: 1.2rem;
}

.integration-card {
    align-items: stretch;
}

.integration-card .card-action {
    text-align: right;
    padding-right: 24px;
}

/* */

.bc-table td {
    vertical-align: top;
}

.command-bar-item .bc-btn {
    box-shadow: none;
}

.not-integrated {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

.card-page-header {
    flex-direction: column;
}

.bc-modal-content-resizable {
    max-width: min(90%, 1400px);
}

.bc-table th {
    top: -1px
}

.bc-icon {
    vertical-align: text-top;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

svg {
    fill: currentColor;
}

.merge-icon:before {
    content:url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12.751' height='18.6619'%3E%3Cg%3E%3Crect height='18.6619' opacity='0' width='12.751' x='0' y='0'/%3E%3Cpath d='M0.902344 17.3285C1.18164 17.3285 1.47168 17.2318 1.72949 17.0599L2.28809 16.684C3.78125 15.6742 5.9834 13.3969 6.35938 12.2582L6.3916 12.2582C6.75684 13.3861 8.95898 15.6742 10.4629 16.684L11.0215 17.0599C11.2793 17.2318 11.5693 17.3285 11.8379 17.3285C12.3857 17.3285 12.751 16.9525 12.751 16.4262C12.751 16.1039 12.5791 15.7816 12.2891 15.599L11.4404 15.0512C9.94727 14.0629 7.31543 11.5707 7.31543 8.93885L7.31543 3.46034L5.43555 3.46034L5.43555 8.93885C5.43555 11.5707 2.79297 14.0521 1.31055 15.0512L0.461914 15.599C0.161133 15.7816 0 16.1146 0 16.4369C0 16.9203 0.354492 17.3285 0.902344 17.3285ZM3.91016 4.91053L8.84082 4.91053C9.59277 4.91053 9.79688 4.38417 9.37793 3.79335L6.98242 0.366588C6.63867-0.11681 6.12305-0.127552 5.76855 0.366588L3.3623 3.7826C2.94336 4.38417 3.13672 4.91053 3.91016 4.91053Z' /%3E%3C/g%3E%3C/svg%3E");
}
/*.merge-icon:focus,*/
/*.merge-icon:hover {*/
/*    background-color: transparent;*/
/*    opacity: 1;*/
/*}*/

button[disabled] .merge-icon::before {
    color: var(bc-disabled); 
    cursor: not-allowed; 
    opacity: 0.5;
}

.dashboard-element-group {
    display: flex;
    row-gap: 1rem;
    flex-direction: column;
}

.percentage-pill {
    background-color: var(--success-color); !important;
    border-radius: 50rem; !important;
    font-size: 11px; !important;
}

.dashboard-element {
    height: 100%;
    width: 100%;
}

.bc-dropdown-toggle > i {
    margin-left: 4px; 
    font-size: smaller;
    width: fit-content;
}

.required:after {
    content: ' *';
    color: red;
}

.uom-type-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 1rem;
}

.uom-tag-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

.chart-container {
    position: relative;
}

.subscription-card {
    background-color: var(--primary-oxford-blue-50);
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.subscriptions {
    height: 100%;
    justify-items: stretch;
    margin-top: 2em;
    margin-left: -10px;
    margin-right: -10px;
    flex-direction: row;
    display: flex;
}

/*.subscriptions-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
/*    */
/*}*/

.gettingstarted-container {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    flex-direction: column;
    display: flex;
}

.gettingstarted-title-container {
    display: flex;
    justify-content: space-between;
}

.gettingstarted-title-container h3 {
    font-weight: 600;
}

.select-subscription-plan {
    max-width: 75pc;
    display: grid;
    padding: 20px 2pc;
}

/* Select Subscription Plan Dialog */

.subscription-section {
    display: grid;
    gap: 1.5rem;
    justify-content: center;
    max-width: 75pc;
}

.subscriptions-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 400px);
    gap: 1.5rem;
    justify-self: center;
}

.subscription-title-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 0.25rem;
    align-items: center;
}

.subscription-header {
    grid-column: 1 / -1; /* spans the same grid as cards */
    text-align: left;
}

.button-group {
    display: flex;
    gap: 8px;
    align-items: center;
}