:root {
    --bs-font-sans-serif: Roboto;
    --bs-link-color: #198754;
    --bs-link-color-rgb: 25, 135, 84;
    --bs-link-hover-color: #75b798;
    --bs-primary: #198754;
    --bs-primary-rgb: 25, 135, 84;
}

a:hover {
    color: var(--bs-primary);
}

a.k-button:hover {
    color: unset;
}

.alert {
    border-radius: 0;
}

.alert-danger {
    --bs-alert-bg: var(--bs-danger);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    color: var(--bs-danger-bg-subtle);
}

.alert-info {
    --bs-alert-bg: var(--bs-info);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    color: var(--bs-info-bg-subtle);
}

.alert-success {
    --bs-alert-bg: var(--bs-success);
    --bs-alert-border-color: var(--bs-success-border-subtle);
    color: var(--bs-success-bg-subtle);
}

.alert-success a {
    color: var(--bs-success-bg-subtle);
}

.alert-warning {
    --bs-alert-bg: var(--bs-warning);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    color: var(--bs-warning-bg-subtle);
}

.alert-warning a {
    color: var(--bs-warning-bg-subtle);
}

body {
    min-width: 370px;
}

.badge.bg-info {
    background-color: #007bff !important;
}

.badge.bg-warning {
    color: #212529;
}

.bg-well {
    background-color: rgb(52, 58, 64);
}

.content-label {
    color: #198754;
    font-family: 'Roboto-Bold', sans-serif;
    font-size: 1rem !important;
    font-weight: bold;
    letter-spacing: 0.2px;
    line-height: 1;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
    text-transform: uppercase;
}

#dev-banner {
    background: red;
    border: 0;
    color: white;
    float: left;
    font-weight: bold;
    height: auto;
    left: -4em;
    margin: 0;
    opacity: 0.75;
    padding: .5em 5em;
    position: fixed;
    top: 3em;
    transform: rotate(-45deg);
    width: auto;
    z-index: 999999999;
}

#dev-banner:before {
    content: "DEVELOPMENT";
}

.form-control {
    border-radius: 0;
}

.form-check-input.k-checkbox {
    margin-top: 0.25em;
}

#fulfillment-fulfillments-index-grid-footer-toolbar * {
    font-size: 0.8rem !important;
}

.fulfillment-fulfillments-edit-expansion-panel {
    border: none;
}

.fulfillment-fulfillments-edit-expansion-panel.k-focus {
    box-shadow: none;
}

.fulfillment-fulfillments-edit-expansion-panel .k-expander-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.5rem;
}

.fulfillment-fulfillments-edit-expansion-panel .k-expander-content {
    font-size: 0.8rem;
    padding: 0.5rem;
}

.fulfillment-fulfillments-edit-expansion-panel .k-expander-title {
    color: #7987a1;
    font-family: 'Roboto-Bold', sans-serif;
    font-size: 0.8rem !important;
    font-weight: bold;
    letter-spacing: 0.2px;
    line-height: 1;
    text-transform: uppercase;
}

.fulfillment-fulfillments-edit-expansion-panel.additional-options .k-expander-header {
    padding: 0.75rem;
}

.fulfillment-fulfillments-edit-expansion-panel.additional-options .k-expander-title {
    color: black;
    font-size: 1rem !important;
}

.fulfillment-fulfillments-show-additional-information-expansion-panel {
    border: none;
}

.fulfillment-fulfillments-show-additional-information-expansion-panel.k-focus {
    box-shadow: none;
}

.fulfillment-fulfillments-show-additional-information-expansion-panel .k-expander-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.5rem;
}

.fulfillment-fulfillments-show-additional-information-expansion-panel .k-expander-content {
    font-size: 0.8rem;
    padding: 0.5rem;
}

.fulfillment-fulfillments-show-additional-information-expansion-panel .k-expander-title {
    color: #7987a1;
    font-family: 'Roboto-Bold', sans-serif;
    font-size: 0.8rem !important;
    font-weight: bold;
    letter-spacing: 0.2px;
    line-height: 1;
    text-transform: uppercase;
}

.fulfillment-fulfillments-show-additional-information-expansion-panel .k-expander-header {
    padding: 0.75rem;
}

.fulfillment-fulfillments-show-additional-information-expansion-panel .k-expander-title {
    color: #dee2e6;
    font-size: 1rem !important;
}

.fulfillment-fulfillments-show-ship-to {
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
}

.fulfillment-fulfillments-show-ship-to-address {
    white-space: pre;
}

.hover-link {
    text-decoration: none;
}

.hover-link:hover {
    text-decoration: underline;
}

#inventory-stock-reservations-release-candidate-request-list .k-list-item {
    display: block;
}

.k-svg-icon.fa {
    height: auto;
    width: auto;
}

.obvious-link {
    color: var(--bs-primary) !important;
}

.obvious-link:hover {
    text-decoration: underline !important;
}

.row-dots {
    background: radial-gradient(circle at 50% 0.8em, #999 8%, transparent 8%) repeat-x;
    background-position: right;
    background-size: 0.5em;
    flex-grow: 1;
    margin-left: 1rem;
    margin-right: 1rem;
    min-height: 1rem;
}

.table-auto {
    width: auto;
}

.table-muted th {
    color: #7987a1;
    font-family: 'Roboto-Bold', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.table-property {
    width: auto;
}

.table-property td,
.table-property th {

}

.table-property tr th:first-child,
.table-property tr td:first-child {
    padding-left: 0;
}

.table-property tr td:first-child {
    font-weight: bold;
    padding-right: 20px;
}

.table-property tr:last-child td {
    border-bottom: none;
}

.table-property tr td:last-child {
    padding-right: 40px;
    word-break: break-word;
}

.table-property tr td:last-child ul {
    margin-left: 16px;
}

.text-smaller {
    font-size: smaller;
}

td.crossed {
    background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), #cdd4e0, transparent calc(50% + 1px));
    height: 50px;
    position: relative;
    width: 100px;
}

td.crossed span {
    position: absolute;
}

td.crossed span:first-child {
    left: 10px;
    top: 5px;
}

td.crossed span:last-child {
    bottom: 5px;
    right: 10px;
}

th.snug, td.snug {
    white-space: nowrap;
    width: 1px;
}

/* Override NProgress bar colors */
#nprogress .bar {
    background: var(--bs-primary);
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--bs-primary), 0 0 5px var(--bs-primary);
}

#nprogress .spinner-icon {
    border-left-color: var(--bs-primary);
    border-top-color: var(--bs-primary);
}

#splash {
    color: var(--bs-primary);
    font-weight: bold;
}

/* Front Layout */
#front-body {
    background: url('../img/bg-front.jpg') no-repeat;
    background-size: cover;
    min-height: 100vh;
}

#front-body-inner {
    background-color: rgba(33, 37, 41, 0.9);
    border: 1px solid #343a40;
    box-sizing: border-box;
    height: 620px;
    left: 50%;
    padding: 30px 35px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
}

#front-logo {
    height: 40px;
    margin-left: -4px;
}

#front-content-outer {
    margin-top: 80px;
}

#front-content h1 {
    color: #03a76c;
    font-size: 28px;
    font-weight: bold;
}

/* main layout */
#main-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main-header {
    border-bottom: 1px solid rgba(28, 39, 60, 0.12);
    box-shadow: 0 0 30px rgba(28, 39, 60, 0.08);
    padding: 10px 0;
}

#main-header-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

#main-header-inner-center {
    flex-grow: 1;
}

#main-header-inner-right {
    align-items: center;
    display: flex;
}

.main-header-inner-right-link {
    color: var(--bs-body-color);
    display: block;
    margin: 0 1rem 0 0;
    transition: color 0.2s;
}

@media (max-width: 700px) {
    #main-header-inner {
        flex-direction: column;
    }

    #main-header-inner-left {
        margin-bottom: 1em;
    }

    #main-header-site-select-wrapper {
        flex-grow: 1;
    }
}

#main-header-avatar {
    cursor: pointer;
}

#main-header-avatar-popover-outer {
    margin: 1rem;
    text-align: center;
}

#main-header-avatar-popover-name {
    font-size: 1.25rem;
    font-weight: bold;
}

#main-header-avatar-popover-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#main-header-avatar-popover-menu li {
    border-bottom: 1px dotted var(--bs-secondary);
    padding: 1rem 0;
}

#main-header-avatar-popover-menu li:last-child {
    border-bottom: none;
}

#main-header-avatar-popover-menu li a {
    color: var(--bs-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

#main-header-avatar-popover-menu li a span {
    margin-right: 0.5rem;
}

#main-header-avatar-popover-menu li a:hover {
    color: var(--bs-primary);

}

#main-header-menu {
    align-items: center;
    font-family: 'Roboto', sans-serif;
    justify-content: center;
}

@media (max-width: 767px) {
    #main-header-menu {
        align-items: start;
        flex-direction: column;
    }

    #main-header-menu .k-item .fa {
        width: 2em;
    }
}

#main-header-menu .k-item {
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 1rem;
    transition: color 0.2s;
}

#main-header-menu .k-hover,
#main-header-menu .k-focus,
#main-header-menu .k-state-border-down,
#main-header-menu .k-item:hover {
    box-shadow: none;
    color: var(--bs-primary) !important;
}

#main-header-menu .k-link {
    border: none;
    transition: color 0.2s;
}

#main-header-menu .k-popup {
    border-radius: 0;
}

#main-header-menu .k-popup .k-item {
    border-bottom: 1px dotted #495057;
    font-weight: normal;
    margin-right: 0;
    padding: 1rem;
}

#main-header-menu .k-popup .k-item:last-child {
    border-bottom: none;
}

#main-header-menu .k-popup .k-link:hover {
    background: #343a40;
    color: var(--bs-primary);
}

#main-header-menu .k-animation-container:before {
    background-color: #343a40;
    border: 1px solid #495057;
    border-bottom-width: 0;
    border-right-width: 0;
    content: ' ';
    height: 1.3rem;
    left: 2rem;
    position: absolute;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 1.3rem;
    z-index: 1;
}

#main-header-menu .k-animation-container {
    padding-top: 18px;
}

@media (max-width: 992px) {
    #main-header-inner {
        flex-wrap: wrap;
    }

    #main-header-inner-center {
        margin-top: 10px;
        order: 100;
        width: 100%;
    }

    #main-header-menu .k-item {
        font-size: 0.85rem;
        margin-right: 0;
    }

    #main-header-menu .k-animation-container:before {
        display: none;
    }
}

#main-logo {
    height: 40px;
}

#main-content {
    flex: 1;
    padding: 20px 0;
}

@media (max-width: 767px) {
    #main-content {
        padding-top: 0;
    }
}

#main-content h2 {
    font-size: 1.3rem;
    font-weight: bold;
}

#main-footer {
    background-color: #212529;
    border-top: 1px solid #495057;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    padding: 10px 0;
}

/* settings layout */
#settings-menu {
    min-width: 10em;
}

#settings-menu .settings-menu-heading,
#settings-menu .settings-menu-heading a {
    color: #198754;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

#settings-menu ul {
    font-size: 0.8em;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

#settings-menu a {
    color: var(--bs-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

#settings-menu a.selected {
    color: var(--bs-primary);
    font-weight: bold;
}

#settings-menu a:hover {
    color: var(--bs-primary);
}

@media (max-width: 767px) {
    #settings-body-container {
        flex-direction: column;
    }

    #settings-menu {
        border: none !important;
        margin-top: 3em;
        order: 100;
    }
}

/* start */
#start-loader {
    margin-top: 120px;
    text-align: center;
}

/* breadcrumbs */
.k-breadcrumb-item,
.k-breadcrumb-item .k-icon {
    font-size: 0.6rem;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
}

.k-breadcrumb .k-breadcrumb-root-link {
    margin-right: 0;
}

.k-breadcrumb .k-breadcrumb-link,
.k-breadcrumb .k-breadcrumb-icon-link {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
}

.k-tabstrip-content * {
    box-sizing: border-box;
}

#receiving-return-labels-show .k-pdf-viewer .k-page {
    transform: rotate(-90deg);
}

#reports-metrics-spreadsheet .k-spreadsheet-quick-access-toolbar {
    display: none;
}

#reports-metrics-spreadsheet .k-tabstrip-top.k-spreadsheet-tabstrip {
    padding-top: 0;
}

#reports-metrics-spreadsheet .k-tabstrip-top .k-tabstrip-items-wrapper {
    display: none;
}

#reports-metrics-spreadsheet .k-spreadsheet-sheets-bar {
    padding-block-end: 0;
}

#reports-metrics-spreadsheet .k-spreadsheet-sheets-bar-add {
    display: none;
}

#reports-metrics-spreadsheet .k-spreadsheet-sheets-remove {
    display: none;
}

#reports-metrics-spreadsheet .k-spreadsheet-sheets-bar .k-tabstrip .k-tabstrip-items-wrapper.k-hstack .k-tabstrip-items.k-reset {
    padding: 0;
}

#reports-packaging-types-spreadsheet .k-spreadsheet-quick-access-toolbar {
    display: none;
}

#reports-packaging-types-spreadsheet .k-tabstrip-top.k-spreadsheet-tabstrip {
    padding-top: 0;
}

#reports-packaging-types-spreadsheet .k-tabstrip-top .k-tabstrip-items-wrapper {
    display: none;
}

#reports-packaging-types-spreadsheet .k-spreadsheet-sheets-bar {
    padding-block-end: 0;
}

#reports-packaging-types-spreadsheet .k-spreadsheet-sheets-bar-add {
    display: none;
}

#reports-packaging-types-spreadsheet .k-spreadsheet-sheets-remove {
    display: none;
}

#reports-packaging-types-spreadsheet .k-spreadsheet-sheets-bar .k-tabstrip .k-tabstrip-items-wrapper.k-hstack .k-tabstrip-items.k-reset {
    padding: 0;
}