/* General variables */
html, body {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome, Edge, Opera and Firefox */
    --screenHeight: calc( 100vh - 104px );
    --CK7: calc(((100vw - 12px) / 7) - 5px);
    --CK8: calc((100vw - 12px) / 8);
    --CK9: calc((100vw - 12px) / 9);
    --CK10: calc((100vw - 12px) / 10);
    --code-color: darkred;
    --code-bg-color: #f6f6f6;
    --code-font-size: 14px;
    --code-line-height: 1.4;
    --scroll-bar-color: #c5c5c5;
    --scroll-bar-bg-color: #f6f6f6;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
}

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 24px; /* Johan 2023-10-18 Width changed from 12 to 24. */
    }

    *::-webkit-scrollbar-track {
        background: var(--scroll-bar-bg-color);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--scroll-bar-color);
        border-radius: 20px;
        border: 3px solid var(--scroll-bar-bg-color);
    }

/* Setting link button default and hover color. a = normal html link. btn-link = bootstrap link button. */
a, .btn-link {
    color: var(--essity-dark-blue);
}

    /* Johan 2023-10-04 Changed to show as italic since showing pink isn't good if the link is in a selected row. */
    a:hover, .btn-link:hover {
        font-style: italic;
    }

/* Main bootstrap background */
.bg-primary {
    background-color: var(--essity-dark-blue) !important;
}

/* Main bootstrap button */
.btn-primary {
    color: #fff;
    background-color: var(--essity-dark-blue);
    border-color: #1861ac;
}
    /* Setting hover color for primary buttons. */
    .btn-primary:hover {
        background-color: var(--essity-magenta);
        border-color: var(--essity-magenta);
    }

.dxbl-btn-secondary:not(.dxbl-disabled):hover {
    background-color: var(--essity-magenta);
    border-color: var(--essity-magenta);
}

.dxbl-btn-secondary.active {
    background-color: var(--essity-magenta) !important;
    border-color: var(--essity-magenta) !important;
}

/* Johan 2021-10-27 As it was hard to tell the difference making disabled buttons less visible by lowering the opacity from 0.65 to 0.3. */
.btn.disabled {
    opacity: 0.3;
}

/* Default Blazor error configuration. */
#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;
    }

/* Navigation selection color. */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--essity-dark-blue);
}

/* Moves the site image 15px to the right. */
.menu-title-template-img {
    padding-left: 15px;
    margin-top: 5.5px;
    width: 200px;
}

.dx-menu-title {
    padding: 0 !important;
}

/* DxGrid headers */
.dxbl-grid-header-content {
    background-color: var(--essity-dark-blue);
    color: white;
    font-weight: bold;
    font-size: 1.0rem;
}

/* DxGrid header border/padding */
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    background-color: var(--essity-dark-blue);
}

/* TODO: In the link it is mentioned this solution isn't reliable. We should update this once they provide a proper fix. */
/* DxGrid row height. https://supportcenter.devexpress.com/ticket/details/t1059635/grid-for-blazor-row-height */
.dxbl-grid .dxbl-grid-table {
    height: 30px;
}

/* DxGrid pager container height. */
.dxbl-grid-pager-container {
    max-height: 40px;
}

/* Any modal title (pop up datagrid form). */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header .dxbl-modal-title {
    font-weight: bold;
    font-size: 1.2rem;
}

/* Any form control focused. */
.form-control:focus {
    border-color: var(--essity-magenta) !important;
    box-shadow: none !important;
}

/* Any modal body container. */
.dxbl-modal-body.dxbl-modal-body {
    background-color: #f5f5f5 !important;
}

/*First row(div.row) in a modal body (this case, the form container)*/
.dxbl-modal-body .row:first-child:not(.row) {
    margin-bottom: 10px !important;
}

/* Modal editor confirmation first button (save/update). */
.dxbl-grid-fl .btn-link:first-of-type {
    color: #fff;
    background-color: #28a745;
    border-color: var(--essity-grey) !important;
}

/* Modal editor confirmation second button (cancel). */
.dxbl-grid-fl .btn-link:last-of-type {
    margin-left: 5px;
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.gridEditButton {
    color: var(--essity-dark-blue) !important;
}

    .gridEditButton:hover {
        color: rgba(0, 0, 80,0.75) !important;
    }

.gridDeleteButton {
    color: var(--essity-magenta) !important;
}

    .gridDeleteButton:hover {
        color: rgba(245, 0, 130,0.5) !important;
    }

.gridNewButton {
    color: rgb(0, 122, 204) !important;
}

/* Edit form checkbox */
div.dxbl-fl-ctrl .dx-blazor-checkbox.dx-blazor-checkbox-align-center {
    justify-content: left !important;
}

.page-link:hover {
    border-color: var(--essity-magenta) !important;
}

.page-link:focus {
    box-shadow: 0 0 0 0.15rem rgb(0 0 80 / 70%);
}

.dxbl-listbox {
    border: 2px solid var(--essity-grey) !important;
}

/* Define the minimum width for the modal editor, when it's specified in the grid. */
.wideGrid {
    min-width: 1080px !important;
}

.dxbl-modal-body .card {
    border: 2px solid rgba(0,0,0,.4) !important;
}

/* Johan 2021-01-05 DxFormLayoutGroup */
.dxbl-group > .dxbl-group-header > .dxbl-text {
    font-weight: bold;
}

/* Johan 2021-01-05 DxFormLayoutItem */
.dxbl-fl:not(.dxbl-fl-calc) .dxbl-fl-item > .dxbl-fl-cpt {
    font-weight: 600;
}

.dxbl-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

/* Johan 2022-07-18 Row alternation for DxGrid. */
/* Johan 2024-01-09 Changed from grey-10 to 20 for mobile. */
.dxGridRowAlternation {
    background-color: var(--essity-grey-20) !important;
}

/* Containers to put grids in. */
.full-height-container-100 {
    height: calc(95vh - 100px);
}

.full-height-container-120 {
    height: calc(95vh - 120px);
}

.full-height-container-180 {
    height: calc(95vh - 180px);
}

.full-height-container-200 {
    height: calc(95vh - 200px);
}

.full-height-container-250 {
    height: calc(95vh - 250px);
}

.one-third-height-container {
    height: calc(30vh - 50px);
}

.two-thirds-height-container {
    height: calc(60vh - 100px);
}

.half-height-container {
    height: calc(45vh - 100px);
}

/* Standard container for Child Grids. */
.child-container {
    height: calc(95vh - 153px);
}

/* Standard container for Grids shown in a popup. */
.popup-container {
    width: 500px;
    height: calc(90vh - 100px);
}

.dx-menu-title {
    padding: 0 !important;
}

/* Navigation bar container */
#app > .card {
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,.125) !important;
}

/* Header button*/
th.dxbl-cmd-cell > button {
    color: white;
}

/* DxGrid selected row. */
.dxbl-grid .dxbl-grid-selected-row > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: var(--essity-magenta) !important;
    font-weight: 700;
}
    /* DxGrid selected row. Split into two rules to correcly apply the highlight and exclude the white color in the checkbox. */
    .dxbl-grid .dxbl-grid-selected-row > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell):not(:has(dxbl-check)) {
        color: white !important;
    }

/* Navigation bar container */
#app > .card {
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,.125) !important;
}

/* Header button*/
th.dxbs-cmd-cell > button {
    color: white;
}

/* Any modal title (pop up datagrid form). */
.dxbl-modal-header {
    font-weight: bold;
    font-size: 1.2rem;
}

/* Any form control focused. */
.form-control:focus {
    border-color: var(--essity-magenta) !important;
    box-shadow: none !important;
}

/* Any modal body container. */
.dxbl-modal-body.dxbs-modal-body {
    background-color: #f5f5f5;
}

/*First row(div.row) in a modal body (this case, the form container)*/
.dxbl-modal-body .row:first-child:not(.row) {
    margin-bottom: 10px;
}

/* Modal editor confirmation first button (save/update). */
.dxbl-grid-fl .btn-link:first-of-type {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

/* Modal editor confirmation second button (cancel). */
.dxbl-grid-fl .btn-link:last-of-type {
    margin-left: 5px;
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.gridEditButton {
    color: var(--essity-dark-blue);
}

    .gridEditButton:hover {
        color: rgba(0, 0, 80,0.75);
    }

.gridDeleteButton {
    color: var(--essity-magenta);
}

    .gridDeleteButton:hover {
        color: rgba(245, 0, 130,0.5);
    }

.gridNewButton {
    color: rgb(0, 122, 204);
}

/* Edit form checkbox */
div.dxbs-fl-ctrl .dx-blazor-checkbox.dx-blazor-checkbox-align-center {
    justify-content: left !important;
}

.page-link:hover {
    border-color: var(--essity-magenta) !important;
}

.page-link:focus {
    box-shadow: 0 0 0 0.15rem rgb(0 0 80 / 70%);
}

.dxbs-listbox {
    border: 2px solid var(--essity-grey) !important;
}

/* Define the minimum width for the modal editor, when it's specified in the grid. */
.wideGrid {
    min-width: 1080px !important;
}

.dxbl-modal-body .card {
    border: 2px solid rgba(0,0,0,.4);
}

.dxbl-modal-body .card-header {
    font-weight: bold;
}

.dxbl-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.wideMgmtModal {
    min-width: 1200px;
    min-height: auto;
    margin: auto !important;
}

.wideMgmtModalCM {
    min-width: 1200px;
    min-height: auto;
    min-height: 40vh !important;
    margin: auto !important;
}

.wideMgmtModalCM_CL {
    min-width: 1200px;
    min-height: auto;
    min-height: 70vh !important;
    margin: auto !important;
}

.wideMgmtModalPopup {
    min-width: 80vw;
    min-height: auto;
    max-height: 85vh;
    margin: auto !important;
}

.wideMgmtModalCM .dxbl-modal-body {
    padding: 0 !important;
}

.wideMgmtModalCM .card-body.divided {
    height: 100%;
}

    .wideMgmtModalCM .card-body.divided .machineScanFinder {
        width: 30% !important;
    }

    .wideMgmtModalCM .card-body.divided .machineLayout {
        width: 70% !important;
    }

.midMgmtModal {
    min-width: 600px;
    min-height: auto;
    margin: auto !important;
}

.zeroMarginTop {
    margin-top: 0 !important;
}

.mb-3 {
    margin-bottom: 0.5rem !important;
}

/* Fix to make the toasts appear on top even when showing a popup. */
.blazored-toast-container {
    z-index: 999999 !important;
}

.profileFrame {
    background-color: rgb(0,30,81);
    display: flex;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.frameSmall {
    height: 30px;
    width: 30px;
    font-size: 15px;
}

.frameBig {
    height: 80px;
    width: 80px;
    font-size: 40px;
}

.roundFrame {
    border-radius: 100%;
}

.profileFrame > span {
    color: #ffffff;
    margin: auto;
}

.userMenu {
    min-width: 400px;
}

.profileMenuFooter {
    background-color: rgba(0,0,0,.04);
    cursor: pointer;
    display: flex;
}

    .profileMenuFooter:hover {
        background-color: rgba(0,0,0,.12);
        cursor: pointer;
    }

    .profileMenuFooter > a {
        height: 100%;
        width: 100%;
        text-align: center;
    }

.userNameLabel {
    word-wrap: normal;
    overflow: hidden;
}

.dxbl-modal-content:has(.confirmHeader) {
    border: var(--dxbl-popup-border-width) var(--dxbl-popup-border-style) var(--essity-dark-blue) !important;
}

.confirmHeader {
    background-color: var(--essity-dark-blue) !important;
    color: white !important;
}

.no-Margin {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.no-Padding {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.FS-150EM {
    font-size: 1.5em;
}

    .FS-150EM > .col-form-label {
        font-size: 1.25em;
    }

.FS-125EM {
    font-size: 1.25em;
}

.breadCrumbSeparator {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E"
    );
}

.essityPink {
    background-color: var(--essity-magenta);
    border-bottom: 1px solid #c8c9cb;
    color: white !important;
}

.essityCyan {
    background-color: var(--essity-complementary-cyan);
    border-bottom: 1px solid #c8c9cb;
    color: white !important;
}

.navBar-Info {
    font-size: 1rem;
}

.hideGroup {
    padding: 0 !important;
}

/* Swiper section */

html, body {
    position: relative;
    height: 100%
}

body {
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0
}

.swiper-container {
    position: relative;
    overflow: hidden;
    background-color: #d9e1eb;
}

.swiper-container, .swiper-wrapper {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: var(--screenHeight);
}

.swiper-slide {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    align-items: center;
    cursor: grab
}

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top
    }

.swiper-plugin-pagination {
    display: block;
    position: absolute;
    top: 50%;
    right: 2.2rem;
    width: .5rem;
    transform: translateY(-50%)
}

.swiper-plugin-pagination__item {
    display: block;
    margin: 100% 0;
    width: 100%;
    padding-top: 100%;
    height: 0;
    border-radius: 50% !important;
    border: none;
    background: #fff;
    transition: background ease .2s;
    cursor: pointer
}

    .swiper-plugin-pagination__item.is-active {
        background: #333
    }

.swiper-lazy {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: all ease 300ms
}

.swiper-lazy-preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.swiper-lazy-loaded {
    opacity: 1
}

.swiper-lazy-preloader::after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(0,0,0,.88);
    border-radius: 50%;
    border-bottom-color: transparent;
    transform-origin: 50%;
    animation: rotate 1s infinite linear
}

@keyframes rotate {
    0% {
        transform: rotate3d(0, 0, 0, 0)
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg)
    }
}

.machDetailMainV2 {
    position: absolute;
    width: calc( 100vw - 40px);
    margin: 0 20px;
    z-index: 999;
}

    .machDetailMainV2.S7 {
        height: calc( ( var(--screenHeight) - ( (var(--CK7) * 2) - 3vh ) ));
        bottom: calc( var(--CK7) + 5vh );
    }

    .machDetailMainV2.S8 {
        height: calc( var(--screenHeight) - ( (var(--CK8) * 2) + 1vh ) );
        bottom: calc( var(--CK8) + 6.5vh );
    }

    .machDetailMainV2.S9 {
        height: calc( var(--screenHeight) - ( (var(--CK9) * 2) + 1vh ) );
        bottom: calc( var(--CK9) + 6.5vh );
    }

.card-detail {
    border-radius: 0.5rem !important;
    overflow: hidden;
}

.S7 .card-detail {
    max-height: calc( var(--screenHeight) - ( (var(--CK7) * 2) - 3vh ) );
}

.S8 .card-detail {
    max-height: calc( var(--screenHeight) - ( (var(--CK8) * 2) + 1vh ) );
}

.S9 .card-detail {
    max-height: calc( var(--screenHeight) - ( (var(--CK9) * 2) + 1vh ) );
}

.hubCountainer {
    height: var(--screenHeight);
    width: 100%;
}

.row-hub {
    margin-left: 5px;
    margin-right: 5px;
    height: calc(var(--screenHeight) - 0px);
}

.row-hubCM {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.col-S7 {
    width: var(--CK7) !important;
    padding: 5px 10px 5px 10px;
    float: left;
    height: 100%;
}

.col-S8 {
    width: var(--CK8) !important;
    padding: 10px;
    float: left;
    height: 100%;
}

.col-S9 {
    width: var(--CK9) !important;
    padding: 5px;
    float: left;
    height: 100%;
}

.generic-Col {
    padding: 5px;
    float: left;
    height: 100%;
}

.col-S10CM {
    width: 14% !important;
    padding: 5px;
    float: left;
    height: 50%;
}

.machineGraph7 {
    width: calc( var(--CK7) - 41px ) !important;
    height: calc( var(--CK7) - 41px ) !important;
    position: relative;
}

.machineGraph8 {
    width: calc( var(--CK8) - 41px ) !important;
    height: calc( var(--CK8) - 41px ) !important;
    position: relative;
}

.machineGraph9 {
    width: calc( var(--CK9) - 3vw ) !important;
    height: calc( var(--CK9) - 3vw ) !important;
    position: relative;
}

.bottomGraph {
    position: absolute !important;
    bottom: 5px !important;
}

.col-S7 .machineContainer {
    width: calc( var(--CK7) - 23px ) !important;
    height: calc( var(--CK7) - 23px ) !important;
    padding: 7px;
}

.col-S9 .machineContainer {
    width: calc( var(--CK9) - 10px ) !important;
    height: calc( var(--CK9) - 10px ) !important;
    padding: 7px;
}

.col-S8 .machineContainer {
    width: calc( var(--CK8) - 23px ) !important;
    height: calc( var(--CK8) - 23px ) !important;
    padding: 7px;
}

.machineContainer {
    overflow: hidden;
    position: inherit;
    display: inherit;
    transition: border-radius 0.5s;
}

.machineGraphMachineTitle {
    color: #ffffff;
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: 2px;
}

.machineGraphVirtualMachineTitle {
    color: #f5f5f5;
    line-height: 0.8rem;
    margin-bottom: 2px;
    padding-bottom: 5px;
    display: inline-block;
}

.machineGraphMachineText {
    color: #f5f5f5;
    font-size: 1.2rem;
    line-height: 0.8rem;
}

.card.card-shadow.machine {
    width: calc( var(--CK8) - 20px ) !important;
    height: calc( var(--CK8) - 20px ) !important;
    overflow: hidden;
    position: inherit;
    display: inherit;
}

.box {
    width: calc( var(--CK8) - 20px ) !important;
    height: calc( var(--CK8) - 20px ) !important;
    top: 0;
    left: 0;
    padding: 10px !important;
}

.stack-top {
    z-index: 9;
    margin-top: calc( (var(--CK8) - 10px) * -2.5 ) !important;
    margin-left: calc( ((var(--CK8) - 10px) / 2) * -1 ) !important;
    width: calc( (var(--CK8) - 10px) * 2 ) !important;
    height: calc( (var(--CK8) - 10px) * 2 ) !important;
    border-radius: 50%;
}

    .stack-top.bottom {
        margin-top: calc( (var(--CK8) - 10px) * -0.5 ) !important;
    }

.machine.Idle {
    background-color: #ffa825;
}

    .machine.Idle.stack-top {
        background-color: #d99922;
    }

    .machine.Idle.active {
        background-color: #ffab2e;
    }

.card-shadow.machine.Idle {
    box-shadow: 0 4px 8px 0 rgba(217, 153, 34, 0.3), 0 2px 4px 0 rgba(217, 153, 34, 0.3);
    border: 2px solid rgba(217, 153, 34, 1) !important;
}

.machine.Started {
    background-color: var(--essity-complementary-green);
}

    .machine.Started.stack-top {
        background-color: var(--essity-complementary-green);
    }

    .machine.Started.active {
        background-color: var(--essity-complementary-green);
    }

.card-shadow.machine.Started {
    box-shadow: 0 4px 8px 0 rgba(0, 141, 123, 0.3), 0 2px 4px 0 rgba(0, 141, 123, 0.3);
    border: 2px solid rgba(0, 141, 123, 1) !important;
}

.machine.Stop {
    background-color: #ff2530;
}

    .machine.Stop.stack-top {
        background-color: #d9212d;
    }

    .machine.Stop.active {
        background-color: #ff1a25;
    }

.card-shadow.machine.Stop {
    box-shadow: 0 4px 8px 0 rgba(217, 33, 45, 0.3), 0 2px 4px 0 rgba(217, 33, 45, 0.3);
    border: 2px solid rgba(217, 33, 45, 1) !important;
}

.machine.Deactivated {
    background-color: var(--essity-grey);
}

    .machine.Deactivated.stack-top {
        background-color: var(--essity-grey);
    }

    .machine.Deactivated.active {
        background-color: var(--essity-grey);
    }

.card-shadow.machine.Deactivated {
    box-shadow: 0 4px 8px 0 rgba(136, 139, 141, 0.3), 0 2px 4px 0 rgba(136, 139, 141, 0.3);
    border: 2px solid var(--essity-grey) !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--essity-magenta);
}

.thickBorder {
    border-width: 4px;
}

.overrideColor {
    background-color: white !important;
}

.card {
    background-color: #f7f7f7;
}

.circleRadius {
    border-radius: 50%;
}

.card-shadow {
    box-shadow: 0 7px 14px 0 rgba(65, 69, 88, 0.15), 0 3px 6px 0 rgba(0, 0, 0, 0.1);
    border: 0px solid rgba(0, 0, 0, 0.325) !important;
}

    .card-shadow.machine.active {
        box-shadow: 0 5px 10px 0 rgba(65, 69, 88, 0.5), 0 7px 14px 0 rgba(65, 69, 88, 0.5);
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        transition: border-radius 0.5s;
    }

.bottomGraph.card-shadow.machine.active {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
}

.smallPopup {
    max-width: 250px;
    min-height: auto;
    margin: auto !important;
}

.mediumPopup {
    width: 300px !important;
    min-height: auto;
    margin: auto !important;
}

.medium2Popup {
    min-width: 550px !important;
    min-height: auto;
    margin: auto !important;
}

.largePopup {
    min-width: 800px !important;
    min-height: auto;
    margin: auto !important;
}

.extraLargePopup {
    min-width: 1200px !important;
    min-height: auto;
    margin: auto !important;
}

.loginOffCanvas {
    width: 280px;
    background-color: #fbfdff;
    overflow-x: auto;
}

    .loginOffCanvas.knittingHub {
        margin-bottom: 51px;
    }

#offcanvasRightLabel {
    font-weight: bold;
    color: #333333;
    margin-bottom: 0 !important;
}

.loginOffCanvas > hr {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.frameMid {
    height: 50px;
    width: 50px;
    font-size: 25px;
}

.offcanvas-body-item {
    padding: 1rem 1rem 0 1rem;
}

.no-Padding-left {
    padding-left: 0 !important;
}

.no-Padding-right {
    padding-right: 0 !important;
}

.no-Padding-top {
    padding-top: 0 !important;
}

.no-Padding-bottom {
    padding-bottom: 0 !important;
}

.no-margin-left {
    margin-left: 0 !important;
}

.no-margin-right {
    margin-right: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-border-radius {
    border-radius: unset !important;
}

.navBar-item-white {
    color: whitesmoke !important;
}

.btn-secondary.action {
    background-color: var(--essity-grey-60);
    color: #333333;
}

.btn-outline-secondary.action {
    background-color: whitesmoke;
    color: #333333;
}

.btn.orderAction {
    padding: 0rem 1rem;
}

.btn.action.information {
    background-color: var(--essity-grey-20);
    color: #333333;
}

.btn-secondary.information {
    background-color: var(--essity-grey-20);
    color: #333333;
}

.order-parent-flex {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.parent-flex {
    display: flex;
    flex-flow: column nowrap;
}

.parent-center-child {
    display: flex;
    justify-content: center;
    align-items: safe center;
}

.order-container-flex {
    flex: 1;
    overflow-y: auto;
}

.orderCard.active {
    background-color: var(--essity-magenta);
    color: whitesmoke;
}

.card.clear {
    border-color: #6a6a6a;
}

.card-titleV2 {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.card.orderCard .card-title {
    font-weight: bold;
}

.btn-secondary.disabled {
    opacity: 0.5 !important;
}

.progressbar-text {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0px;
    margin: 0px;
    transform: translate(-50%, -50%) !important;
    color: rgb(201, 201, 201);
    text-align: center;
}

@-webkit-keyframes blink {
    50% {
        background-color: rgba(234, 218, 21,.60);
        border-color: rgba(234, 218, 21,.60);
        color: rgba(255, 47, 47,.90) !important;
    }
}

@-moz-keyframes blink {
    50% {
        background-color: rgba(234, 218, 21,.60);
        border-color: rgba(234, 218, 21,.60);
        color: rgba(255, 47, 47,.90) !important;
    }
}

@keyframes blink {
    50% {
        background-color: rgba(234, 218, 21,.60);
        border-color: rgba(234, 218, 21,.60);
        color: rgba(255, 47, 47,.90) !important;
    }
}

.blink {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: .8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: linear;
    -moz-animation-direction: normal;
    -moz-animation-duration: .8s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: blink;
    -moz-animation-timing-function: linear;
    animation-direction: normal;
    animation-duration: .8s;
    animation-iteration-count: infinite;
    animation-name: blink;
    animation-timing-function: linear;
    border-radius: 50%;
}

@-webkit-keyframes REDNAUT {
    50% {
        background-color: rgba(255, 47, 47,.90);
        border-color: rgba(255, 47, 47,.90) !important;
    }
}

@-moz-keyframes REDNAUT {
    50% {
        background-color: rgba(255, 47, 47,.90);
        border-color: rgba(255, 47, 47,.90) !important;
    }
}

@keyframes REDNAUT {
    50% {
        background-color: rgba(255, 47, 47,.90);
        border-color: rgba(255, 47, 47,.90) !important;
        color: rgba(255, 47, 47,.90) !important;
    }
}

.REDNAUT {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: .9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: REDNAUT;
    -webkit-animation-timing-function: linear;
    -moz-animation-direction: normal;
    -moz-animation-duration: .9s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: REDNAUT;
    -moz-animation-timing-function: linear;
    animation-direction: normal;
    animation-duration: .9s;
    animation-iteration-count: infinite;
    animation-name: REDNAUT;
    animation-timing-function: linear;
}

.machineChart {
    width: 100% !important;
    height: calc(100% / 3) !important;
}

.dxbl-modal-body label.col-form-label {
    font-size: 1.2rem;
}

.card-body.divided {
    padding: 0;
    display: flex;
    align-items: stretch;
    border-radius: 0.5rem;
}

.card-footer.divided {
    padding: 0;
    display: flex;
    align-items: stretch;
    border-radius: 0rem;
}

    .card-body.divided > div, .card-footer.divided > div {
        float: left;
    }

        .card-body.divided > div:first-child {
            padding: 1rem 1rem;
        }

        .card-body.divided > div:last-child {
            padding: 1rem 1rem 0.5rem 0.5rem;
            border-left: 1px solid rgba(0, 0, 0, 0.125);
            background-color: rgba(0, 0, 0, 0.03);
        }

    .card-footer.divided > div {
        padding: 1rem 1rem;
    }

        .card-footer.divided > div:last-child {
            border-left: 1px solid rgba(0, 0, 0, 0.125);
        }

.maintenanceLogs .dropdown-item {
    font-size: 1.25rem;
}

.machDetailMainV2 .dxbs-editor-disabled {
    opacity: 1;
}

.dxbs-editor-disabled input.form-control {
    background-color: white;
}

.machDetailMainV2 .dxbs-form-control {
    font-weight: 400;
    font-size: 1rem;
}

.nav-pills.handheldSelector {
    border-bottom: 1px solid var(--essity-grey-60);
    border-top: 1px solid var(--essity-grey-60);
    padding: 1px 0;
}

    .nav-pills.handheldSelector button.nav-link {
        font-weight: 600;
        padding: 0.5rem 0.75rem;
    }

.bigIcon {
    font-size: 1.8rem;
}

.dxbl-grid-table td, .dxbl-grid-table th {
    border-color: var(--essity-grey) !important;
}

.dx-btn .bigIcon {
    font-size: 1.5rem;
}

.btn-lg.dx-btn .bigIcon {
    font-size: 1.8rem;
}

.testGradient {
    /*    background: rgb(255,224,158);
    background: linear-gradient(180deg, rgba(255,224,158,1) 0%, rgba(254,198,130,1) 35%, rgba(255,136,0,1) 100%);*/
}

.errorMachine {
    background-color: #ff1a25;
    color: whitesmoke;
}

/* Steps */
.step {
    position: relative;
    min-height: 1em;
    color: gray;
}

.step {
    position: relative;
    z-index: 999;
}

    .step + .step {
        margin-top: 1.5em
    }

    .step > div:first-child {
        position: static;
        height: 0;
    }

    .step > div:not(:first-child) {
        margin-left: 1.5em;
        padding-left: 1em;
    }

    .step.step-active {
        color: #4285f4
    }

        .step.step-active .circle {
            background-color: #4285f4;
        }

/* Circle */
.circle {
    background: gray;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    border-radius: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 0 1px var(--essity-grey-20);
}

    .circle.completed {
        background-color: var(--essity-complementary-green);
    }

    .circle.controlPlan {
        background-color: var(--essity-magenta);
    }
    /* Vertical Line */
    .circle:after {
        content: ' ';
        position: absolute;
        display: block;
        top: 1px;
        right: 50%;
        bottom: 1px;
        left: 50%;
        height: 100%;
        width: 1px;
        transform: scale(1, 2);
        transform-origin: 50% -100%;
        background-color: rgba(0, 0, 0, 0.25);
        z-index: -1;
    }

.step:last-child .circle:after {
    display: none
}

/* Stepper Titles */
.title {
    line-height: 1.5em;
    font-weight: bold;
}

.caption {
    font-size: 0.8em;
}

p.nfcLog {
    font-size: 0.75rem;
    margin: 0 !important;
}

@media screen and (max-height:899px) {

    .btn.action {
        padding: 0.25rem 0.2rem;
    }

    .btn span.btnTxt {
        font-size: 0.9rem;
        font-weight: bold;
    }

    .card-body.orderAction {
        text-align: center;
    }

    .btn.orderAction, .card-body.orderAction {
        padding: 0.1rem 0.5rem;
    }

        .btn.orderAction span.btnTxt {
            font-size: 1.4rem;
            font-weight: bold;
        }

            .btn.orderAction span.btnTxt.qty, .card-body.orderAction span.btnTxt.qty {
                font-size: 1.6rem;
                font-weight: bold;
                text-align: center;
            }
}

@media screen and (min-height:900px) {
    .btn.action {
        padding: 0.25rem 0.25rem;
    }

    .btn span.btnTxt {
        font-size: 0.9rem;
        font-weight: bold;
    }

    .card-body.orderAction {
        text-align: center;
    }

    .btn.orderAction, .card-body.orderAction {
        padding: 0.85rem 0.5rem;
    }

        .btn.orderAction span.btnTxt {
            font-size: 1.5rem;
            font-weight: bold;
        }

            .btn.orderAction span.btnTxt.qty, .card-body.orderAction span.btnTxt.qty {
                font-size: 2rem;
                font-weight: bold;
                text-align: center;
            }
}

@media screen and (max-height:750px) {

    .btn.action {
        padding: 0.25rem 0.25rem;
    }

    .btn span.btnTxt {
        font-size: 1.1rem;
        font-weight: bold;
    }

    .card-body.orderAction {
        text-align: center;
    }

    .btn.orderAction, .card-body.orderAction {
        padding: 0.1rem 0.5rem;
    }

        .btn.orderAction span.btnTxt {
            font-size: 1.2rem;
            font-weight: bold;
        }

            .btn.orderAction span.btnTxt.qty, .card-body.orderAction span.btnTxt.qty {
                font-size: 1.2rem;
                font-weight: bold;
                text-align: center;
            }
}

.pass.form-check-input:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.fail.form-check-input:checked {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.cut-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#the-canvas {
    width: 100% !important;
}

.pdfViewerPopup {
    height: 94%;
    min-width: 80vw;
}

.pdfViewerBody {
    padding: 0;
}

/* Checkbox, show value true with green background. */
.dxbl-checkbox-check-element:has(input:checked) {
    background-color: var(--bs-green) !important;
    border-color: var(--bs-green) !important;
}

.machineIcons {
    font-size: 1rem;
}

.yarnChangeRequired {
    opacity: 0;
}

    .yarnChangeRequired.active {
        opacity: 1;
        color: rgba(255,255,255,1);
    }

.validationWaiting {
    opacity: 0;
}

    .validationWaiting.active {
        opacity: 1;
        color: rgba(255,255,0,0.9); /* Jean requested this to be changed to yellow. */
    }

/* Johan 2024-10-23 Open request icon in the knitting hub machine circle. */
.openRequest {
    opacity: 0;
}

    .openRequest.active {
        opacity: 1;
        color: var(--essity-complementary-orange);
    }

/* Johan 2024-11-12 Formatting of the user initials in the knitting hub. */
.userInitialsBox {
    color: var(--essity-complementary-cyan) !important;
    background-color: none;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
    font-weight: bold;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 10pt 5pt rgba(204, 0, 0, 0.1);
    }

    70% {
        box-shadow: 0 0 10pt 5pt rgba(204, 0, 0, 0.9);
    }

    100% {
        box-shadow: 0 0 10pt 5pt rgba(204, 0, 0, 0.1);
    }
}

input.cleanRed {
    background-color: rgba(204,0,0,0.5) !important;
}

.pulseRed {
    box-shadow: 0 0 8pt 4pt rgba(204, 0, 0, 0.9);
    animation: pulse 2s infinite;
}

/* Knitting Hub cleaning percentage button. */
.cleanButton {
    padding-left: 0.2rem !important;
    padding-right: 0 !important;
}

.dxbl-modal-body .dxbl-row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.dxbl-fl {
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 10px;
}

.dxbl-btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

label.dxbl-fl-cpt.dxbl-text {
    font-weight: bold;
}

.dxbl-modal-footer .dxbl-btn:first-child {
    margin-right: 0.25rem;
}

.dxbl-modal-footer .dxbl-btn:last-child {
    margin-left: 0.25rem;
}

.btn-secondary.active {
    background-color: var(--essity-magenta);
    border-color: var(--essity-magenta);
}

/* DevExpress 23.1 Checkbox formatting. */
/* Show true with green check and border. */
.dxbl-checkbox-display-view-checked {
    color: var(--bs-green);
}

    .dxbl-checkbox-display-view-checked .dxbl-image {
        fill: var(--bs-green) !important;
    }

    .dxbl-checkbox-display-view-checked > div::before {
        opacity: 1 !important;
    }
/* Show false with a red X and red border. */
.dxbl-checkbox-display-view-unchecked {
    color: var(--bs-red);
}

    .dxbl-checkbox-display-view-unchecked > div::before {
        opacity: 1 !important;
        background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.1.1 by fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath fill='%23dc3545' d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }
/* Show null with grey border and dash. */
.dxbl-checkbox.dxbl-checkbox-display-view-indeterminate > div::after {
    background-color: var(--essity-grey-60) !important;
}

.qualityTestResultPopUp {
    height: 95%;
    min-width: 95vw;
}

/* Checkbox, show value true with green background. */
.dxbl-checkbox-check-element:has(input:checked) {
    background-color: var(--bs-green) !important;
    border-color: var(--bs-green) !important;
}

.dxbs-tree > ul.nav > li.dxbs-clickable > dxbl-expandable-container > ul {
    margin-left: 0 !important
}

.expand-btn.btn.btn-link {
    max-height: 0.7em;
    max-width: 0.7em;
}

.dxbl-modal-body .dxbl-row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.dxbl-grid {
    border: 1px solid var(--essity-grey) !important;
}

.testPdfView {
    height: calc(100% - 40px) !important;
}

.performTestPopUpBody {
    padding: 1rem 1rem 0 0;
}

.popUpRightBorder {
    border-right: 1px solid #dee2e6;
}

.loadingScreen {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

    .loadingScreen .dxbl-modal-content {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .loadingScreen .dxbl-modal-header {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

        .loadingScreen .dxbl-modal-header::before {
            background-color: transparent !important;
        }

    .loadingScreen .dxbl-modal-body {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

.btnLoading.btn:disabled {
    opacity: 1;
}

dxbl-check.dxbl-checkbox-unchecked.uncheckedCrossEnable input[type="checkbox"] {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.1.1 by fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath fill='white' d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    background-color: var(--bs-red);
    border-color: var(--bs-red);
    border-radius: 0.1875rem;
}

.qcTestMainGrid {
    height: calc(95vh - 380px);
}

.dxbl-modal-footer .dxbl-btn:first-child {
    margin-right: 0.25rem !important;
}

.dxbl-modal-footer .dxbl-btn:last-child {
    margin-left: 0.25rem !important;
}

/* Make navigation menu selections pink. Needed after a change in DevExpress 23.1. */
.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active {
    background-color: var(--essity-magenta);
}

/* DevExpress 23.1 Checkbox formatting. */
/* Show true with green check and border. */
.dxbl-checkbox-display-view-checked {
    color: var(--bs-green);
}

    .dxbl-checkbox-display-view-checked .dxbl-image {
        fill: var(--bs-green) !important;
    }

    .dxbl-checkbox-display-view-checked > div::before {
        opacity: 1 !important;
    }
/* Show false with a red X and red border. */
.dxbl-checkbox-display-view-unchecked {
    color: var(--bs-red);
}

    .dxbl-checkbox-display-view-unchecked > div::before {
        opacity: 1 !important;
        background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.1.1 by fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath fill='%23dc3545' d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }
/* Show null with grey border and dash. */
.dxbl-checkbox.dxbl-checkbox-display-view-indeterminate > div::after {
    background-color: var(--essity-grey-60) !important;
}

.articleTagBox {
    max-width: 220px;
    width: 100%;
}

.measurePointHeader {
    font-size: 1.4rem;
}

/* Johan 2022-07-05 Remove the see through borders from the summary row. */
.dx-grid-summary-row {
    border: 0 !important;
}

.firstInspectionReprintButton {
    background-color: rgb(0, 122, 204) !important;
    color: whitesmoke !important;
}

#doMobilomatButton {
    font-weight: bold;
    font-size: 1.01rem;
}

.strongHighlightButton:focus-visible {
    border-color: var(--essity-complementary-cyan) !important;
    box-shadow: 0px 0px 8px 4px rgba(0, 153, 255, 0.7) !important;
}

.dxbl-text-edit:has(.qcEntryInput:focus) {
    border-color: var(--essity-magenta) !important;
    box-shadow: none !important;
}

.qcEntryInput:disabled {
    background-color: #abaaaa;
}

.block {
    height: 50vh;
    margin: 0;
    padding: 0;
    border: 1px solid #999999;
    overflow: hidden;
}

.dashboardGraph {
}

.dashboardGraphParent {
    margin: auto;
}

.metricsContainer {
    height: 30vw;
    vertical-align: middle;
}

.metricsMain {
    background-color: #ededed;
}

.metricsCard {
    background-color: whitesmoke;
    margin-top: 15px !important;
}

.bdeCard {
    max-width: 800px;
    border: 4px solid var(--essity-grey);
}

.calculatorKey {
    height: 85px;
    padding: 2px;
    margin: 0;
}

.loginIcon {
    font-size: 50px;
}

    .loginIcon.active {
        color: var(--essity-complementary-cyan)
    }

    .loginIcon.start {
        color: var(--essity-complementary-green)
    }

    .loginIcon.end {
        color: red;
    }

.bdeMainInput {
    font-size: 40px;
}

.userLogedLabel {
    color: var(--essity-dark-blue);
    font-size: 0.8rem;
}

.goalBoardParent {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.sewingMainChart {
    height: 90%;
    width: 130%;
    position: static
}

@media screen and (max-height:1000px) {
    .sewingMainChart {
        height: 95%;
        width: 100%;
    }
}

.sewingMainChartLabel {
    font-size: 2rem;
}

.actualLabel {
    vertical-align: bottom;
    height: 100%;
    font-size: 5vh;
    color: whitesmoke;
}

.actualContainer {
    background-color: var(--essity-complementary-green);
    border-bottom: 1px solid #3f3f3f;
}

.actualQtyLabel {
    font-size: 25vh;
}

.goalLabel {
    font-size: 4vh;
    color: whitesmoke;
}

.goalContainer {
    background-color: var(--essity-magenta);
    border-top: 1px solid #3f3f3f;
    border-bottom: 1px solid #3f3f3f;
}

.goalQtyLabel {
    font-size: 15vh;
    font-weight: bold;
    color: red;
}

.loginIconGoalBoard {
    font-size: 15vh;
}

    .loginIconGoalBoard.active {
        color: var(--essity-complementary-cyan)
    }

.currentUserTitleLabel {
    color: whitesmoke;
}

.currentUserTitleContainer {
    background-color: var(--essity-dark-blue);
    border-bottom: 1px solid #3f3f3f;
}

.goalBoardTitle {
    font-size: 5vh;
}

.userLoggedLabelGoalBoard {
    color: var(--essity-dark-blue);
    font-size: 1.1rem;
}

.sewingHubProductionJobGrid {
    height: 90% !important;
}

.simpleBorder {
    /*border: 1px solid #3f3f3f;*/
}

.sewingHubProductionJobGrid {
    border: 1px solid var(--essity-grey) !important;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.5rem;
}

.sewingHubRepair.active {
    border: 3px solid var(--essity-magenta);
}

.sewingHubLogistic.active {
    border: 3px solid var(--essity-magenta);
}

.sewingHubSupervisor.active {
    border: 3px solid var(--essity-magenta);
}

.clusterContainer {
    height: 33%;
}

.clusterElement {
    border: 1px solid #333;
    overflow: hidden;
}

    .clusterElement > .card-header > h2 {
        font-weight: bold;
        color: whitesmoke;
    }

    .clusterElement > .card-body > h1 {
        font-weight: bold;
        color: whitesmoke;
        font-size: 5rem;
        text-align: center;
    }

.clusterLight {
    border-top: 1px solid var(--essity-dark-blue);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .clusterLight > div {
    }

    .clusterLight.needsLogistics {
        background-color: orange;
    }

    .clusterLight.needsRepair {
        background-color: #1a1aff;
        border-right: 1px solid var(--essity-dark-blue);
    }

    .clusterLight.needsSupervisor {
        background-color: #ff1a1a;
        border-right: 1px solid var(--essity-dark-blue);
    }

.card-header.stop {
    background-color: var(--essity-grey);
}

.card-header.inProduction {
    background-color: var(--essity-complementary-green);
}

.chatDashboardQtyList {
    border-right: 1px solid var(--essity-dark-blue);
    border-radius: 0;
}

    .chatDashboardQtyList li {
        font-size: 1.4rem;
        font-weight: bold;
        background-color: whitesmoke
    }

.darkOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* black with 50% opacity */
}

.clusterEfficiency {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .clusterEfficiency h1 {
        color: whitesmoke;
        font-size: 5rem;
        text-align: center;
    }

.inactiveCluster h1 {
    color: var(--essity-grey-60);
}

.inactiveCluster {
    background-color: ghostwhite;
}

.perfectEfficiency {
    background-color: var(--essity-complementary-green);
}

.goodEfficiency {
    background-color: var(--essity-complementary-orange);
}

.badEfficiency {
    background-color: #ff6666;
}

/* WebAssembly loader */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Avoids focus on headers. */
h1:focus {
    outline: none;
}

.productionInputEdit {
    font-weight: bold !important;
    font-size: 2.8em;
}

.ovalCard {
    border-radius: 20px 20px;
}