@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('font-awesome/css/fontawesome.min.css');
:root {
    --mobile-breakpoint: 767.98px;
    --tablet-portrait-breakpoint: 900px;
    --tablet-landscape-breakpoint: 1050px;
    --desktop-breakpoint: 1281px;
}

.swal2-close{
    display: flex;
    position: relative;
    top: -15px;
    right: -5px;
}

.search-panel {
    width: fit-content;
    max-width: 100%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 16px;
    padding: 1rem 1.5rem 1rem 2.5rem;
}

.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");
    }

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

.input-file {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.input-file:hover {
    cursor: pointer;
}

.btn.close {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
}

.upload-btn {
    position: relative;
    color: #fff;
    width: 40px;
    height: 38px;
    background-color: #17a2b8;
    border-color: #17a2b8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.1em;
    border-radius: 25%;
}

.upload-btn:hover {
    cursor: pointer;
}

.upload-btn::before {
    content: "+";
    position: absolute;
    top: 10px;
    right: -4px;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    font-weight: 700;
    color: white;
}

.download-btn {
    position: relative;
    color: #fff;
    width: 40px;
    height: 38px;
    background-color: #17a2b8;
    border-color: #17a2b8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.1em;
}

.download-btn:hover {
    color: white;
}

.btn-attachment {
    position: relative;
    height: 50px;
    width: 50px;
    padding-right: 14px;
    padding-top: 8px;
    margin-top: 10px;
    border-radius: 15px;
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #ffffff;
    text-align: end;
    float: right;
    clear: right;
}
.btn-attachment:hover {
    color: #ffffff;
    background-color: #138496;
    border-color: #17a2b8;
}

.btn-note{
    top: 4px;
    height: 50px;
    position: relative;
    width: 50px;
    padding-right: 14px;
    padding-top: 8px;
    margin-top: 10px;
    border-radius: 15px;
    color: #ffffff;
    background-color: #1cb817;
    border-color: #1cb817;
    text-align: end;
    float: right;
    clear: right;
}

.btn-note:hover{
    color: #ffffff;
    background-color: #179f14;
    border-color: #1cb817;
}

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn .badge {
    position: relative;
    top: -1px;
}

.badge-parent .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px 8px;
    border-radius: 50%;
    background: red;
    color: white;
}

.detail-status--1{
    background-color: rgb(255 0 0 / 62%) !important;
}

.detail-status-0 {
    background-color: rgba(255, 224, 0, 0.73) !important;
    /*background-color: #D3D3D3 !important;*/
}

.detail-status-1 {
    background-color: #38c438c4 !important;
}

.input-box-append {
    border-style: solid;
    border-width: 1px;
    border-radius: 0px 5px 5px 0px;
    background-color: #e5e5e57d;
    padding: 0.5px 3px 0.5px 2px;
    font-weight: 600;
    margin-left: -1px;
    font-size: 1.2rem;
    /*height: inherit;*/
}

.lg-object.white-background-slide {
    background-color: #FFFFFF !important;
}


.measurment-articles-btn-row {
    white-space: nowrap;
    margin-bottom: 10px;
    white-space: nowrap;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}


.measurement-wrapper input {
    box-sizing: border-box; /* Includes padding and border in the element's total width */
    max-width: 100%; /* Ensures that elements do not grow beyond the cell size */
    max-width: 100%;
    padding-left: 5px;
    border-radius: 5px;
}

.measurement-wrapper select {
    box-sizing: border-box; /* Includes padding and border in the element's total width */
    max-width: 100%; /* Ensures that elements do not grow beyond the cell size */
    padding-left: 5px;
    border-radius: 5px;
    padding-bottom: 5px;
}


.modal-content-scrollable {
    max-height: 90vh; /* Adjust as needed */
    overflow-y: auto; /* Enable vertical scrolling */
}


.blazored-modal-loading {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: transparent !important;
    border-radius: 4px;
    border: none !important;
    align-content: center;
    width: 150px;
    height: auto;
}

.responsive-gif {
    width: 50vw;
    height: auto; /* This ensures the height adjusts to maintain the aspect ratio */
    max-width: 640px; /* Ensures it doesn't exceed the original size */
    max-height: 640px; /* Ensures it doesn't exceed the original size */
}

.rotation-prompt {
    display: none;
}

.lg-on {
    overflow: hidden;
}

.sticky-table-title {
    position: sticky;
    top: 0;
    left: 0;
}

.custom-h4 {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

.te-container {
    display: flex;
    flex-direction: column;
    width: auto;
}

.te-nav-container {
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(64, 64, 64);
    background-color: rgb(64, 64, 64);
    margin-bottom: 10px;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
}


.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    outline: none;
}

.close-btn:hover {
}

/* Ensure the table container allows horizontal scrolling */
.responsive-time-segments-table {
    overflow-x: auto;
}

/* Set the table to display as a block for better control */
.responsive-time-segments-table table {
    display: block;
    width: 100%;
    min-width: 600px; /* Set a minimum width that triggers horizontal scrolling */
}

/* Define column widths using percentages to maintain ratios */
.responsive-time-segments-table th,
.responsive-time-segments-table td {
    width: auto;
    min-width: 80px; /* Set a minimum width for columns */
}

.kvi-tile-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Creates as many columns as needed with a minimum size of 250px and maximum of 1 fraction of available space */
    gap: 10px; /* Space between tiles */
    padding: 10px 10px 10px 0px; /* Padding around the grid container */
    background-color: inherit; /* Light grey background, customizable */
    border: 1px solid inherit; /* Subtle border, optional */
}

.kvi-tile-container > div {
    background-color: white; /* Background color for each tile */
    padding: 15px; /* Padding inside each tile */
    border-radius: 8px; /* Rounded corners for each tile */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Shadow for depth, optional */
    display: flex; /* Ensures the content inside is flexibly aligned */
    flex-direction: column; /* Stacks content vertically */
    /*justify-content: space-between;*/ /* Distributes space around items */
}

.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
}

.lightbox-modal-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 50vw;
    text-align: center;
    /*border-radius: 25px;*/
    overflow: hidden;
    object-fit: contain;
}

.attachment-image-expanded {
    max-width: 50vw;
    height: 80vh;
    object-fit: contain;
    object-position: center;
}


.error-content {
    padding: 20px;
    background-color: #fff4f4; /* Light red background */
    border-left: 5px solid #ff4141; /* Darker red border on the left */
    color: #333; /* Dark text for readability */
    margin: 20px 0;
    border-radius: 4px;
}

.error-content h2 {
    color: #d8000c; /* Dark red */
    margin-top: 0;
}

.error-content p {
    margin: 10px 0;
}

.error-details {
    margin-top: 15px;
}

.error-details summary {
    cursor: pointer;
    font-weight: bold;
}

.error-details p {
    background-color: #f8f8f8; /* Light gray background */
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
    white-space: pre-wrap; /* Ensures formatting of the error message is retained */
}

.current_version_number {
    word-break: break-word;
}

.current_version_number::before {
    content: "Tech_Event_Resources_V2025.03.19.001";
}


.product-category-lbl {
    display: block;
    margin-bottom: -5px;
}

.daily-tech-event-cards-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overscroll-behavior-y: contain !important;
}


a, .btn-link {
    color: #0366d6;
}

.custom-link {
    color: #6cb1ff;
}

.custom-link:hover {
    color: #6cb1ff;
}

.index-background-class {
    /*background-image: url();*/
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-transform {
    transform: scale(1.0);
    transition: all .4s ease-out;
}


.content {
    padding-top: 1.1rem;
    min-height: 100vh;
}

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

/*.invalid {*/
/*    outline: 1px solid red;*/
/*}*/

.validation-message {
    color: red;
}

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

.space {
    width: 100%;
    height: 100%;
    background-image: url("https://newevolutiondesigns.com/images/freebies/galaxy-wallpaper-1.jpg");
}

.text-block {
    position: absolute;
    left: 400px;
    top: 150px;
    background-color: transparent;
    z-index: 2;
}

.a-overflow {
    overflow-wrap: break-word;
}

.fit-to-content {
    max-width: initial;
}

/*If screen is full size hide +/- btns*/
.responsive-btns {
    display: none;
}

.category-select {
    font-size: 1.2rem;
    border-radius: 15px;
    padding-left: 5px;
    vertical-align: bottom;
}

/*.dataTables_paginate {
    font-size: 1.5rem;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
}

    .dataTables_paginate:hover {
        transform: scale(1.0);
        transition: all .4s ease-out;
        cursor: default;
    }

.paginate_button {
    transform: scale(1.0);
    transition: all .4s ease-out;
}

    .paginate_button:hover {
        cursor: pointer;
        transform: scale(1.1);
        transition: all .4s ease-out;
    }*/

@media (pointer: fine) {
    .btn-neutral:hover {
        color: white;
        background-color: dimgray;
        border-color: dimgray;
    }

    .btn-transform:hover {
        transform: scale(1.1);
        transition: all .4s ease-out;
    }

    .clickable:hover {
        cursor: pointer;
        text-decoration: underline;
    }

    .delete-btn:hover {
        color: white;
    }

    .download-btn:hover {
        color: white;
    }

    .edit-btn:hover {
        color: white;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: dimgray;
    }
}


.label {
    font-size: 1.5rem;
}

.dataTables_wrapper, .dataTables_length {
    font-size: 1.0rem;
}

.nav_header {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    font-size: 1.2em !important;
}

.margin-right-spinner {
    margin-right: 15px !important;
}

.loader {
    font-family: 'OCR A', monospace;
}

.timer {
    font-size: 1.5em;
    color: red;
}

.margin_right_left {
    margin-left: 0.5em;
    margin-right: 0.5em;
}

button:disabled,
button[disabled] {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
}

.mdb-main-label {
    margin-bottom: 0.7rem;
}

/*For Toasts*/
.toast {
    display: none;
    padding: 1.5rem;
    color: #fff;
    z-index: 4;
    position: absolute;
    width: 25rem;
    top: 2rem;
    border-radius: 1rem;
    left: 50%;
}

.toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    font-size: 2.5rem;
}

.toast-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 1rem;
}

.toast-body p {
    margin-bottom: 0;
}

.toast-visible {
    display: flex;
    flex-direction: row;
    animation: fadein 1.5s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.log-gauge {
    min-width: 300px;
}

.blazored-toast-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 102;
}


.blazored-modal-scrollable {
    display: flex;
    max-height: calc(100% - 1rem);
    overflow-y: auto !important;
}

/*
.blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: none !important;
    border-radius: 4px;
    border: none !important; 
    padding: 1.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    align-content:center;
}*/


/*Style 1.0 Karine*/
input.Search {
    background-image: url(../Images/Search.png);
}

input.Search:hover {
    background-image: url(../Images/SearchHL.png);
}

.sidebar {
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
    background-color: lightgray;
}


html, body {
    font-family: 'Segoe UI', Segoe UI, Arial, sans-serif;
}

.tab {
    overflow: hidden;
    border: 1px solid rgb(64, 64, 64);
    background-color: rgb(64, 64, 64);
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: rgb(64, 64, 64);
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}


/* Create an active/current tablink class */
.tab button.active {
    background-color: dimgray;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: dimgray;
    border-color: dimgray;
}

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

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
}

.main .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
}

.main .top-row > a, .main .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
}

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.TitleSection {
    font-size: 3rem;
}

input.Search {
    background-image: url(../Images/Search.png);
}

input.Search:hover {
    background-image: url(../Images/SearchHL.png);
}

.sidebar {
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
    background-color: lightgray;
}

.ImageProduct {
    position: relative;
    display: inline-block;
}

.ImageProduct .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.ImageProduct:hover .img-top {
    display: inline;
}

.sidebar .top-row {
    background-color: dimgray;
}

.sidebar .navbar-brand {
    font-size: 2rem;
    align-content: center;
    vertical-align: top;
}

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

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

.sidebar .nav-item:first-of-type {
    padding-top: 1rem;
}

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

/*Product Tab*/
.product-img-nav-parent .product-img-nav {
    background-image: url(../images/ProductWeb48_GRAY.png);
    width: 48px;
    height: 48px;
}

.sidebar .nav-item a.active .product-img-nav {
    background-image: url(../images/ProductWeb48_HL.png);
    width: 48px;
    height: 48px;
}

.product-img-nav-parent:hover .product-img-nav {
    background-image: url(../images/ProductWeb48_HL.png);
    width: 48px;
    height: 48px;
    cursor: default;
    transform: scale(1.1);
    transition: ease-in-out 0.4s;
}

/*HomeTab*/
.home-img-nav-parent .home-img-nav {
    background-image: url(../images/GoHome_LIGHT.png);
    width: 48px;
    height: 48px;
}

.sidebar .nav-item a.active .home-img-nav {
    background-image: url(../images/GoHome_LIGHT_HL.png);
    width: 48px;
    height: 48px;
}

.home-img-nav-parent:hover .home-img-nav {
    background-image: url(../images/GoHome_LIGHT_HL.png);
    width: 48px;
    height: 48px;
    cursor: default;
    transform: scale(1.1);
    transition: ease-in-out 0.4s;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg)
    }

    25% {
        transform: rotateY(90deg)
    }

    50% {
        transform: rotateY(180deg)
    }

    75% {
        transform: rotateY(280deg)
    }

    100% {
        transform: rotateY(365deg)
    }
}

/*TechEvenTab*/
.techevent-img-nav-parent .techevent-img-nav {
    background-image: url(../images/TechEvents_LIGHT.png);
    width: 48px;
    height: 48px;
}

.sidebar .nav-item a.active .techevent-img-nav {
    background-image: url(../images/TechEvents_LIGHT_HL.png);
    width: 48px;
    height: 48px;
}

.techevent-img-nav-parent:hover .techevent-img-nav {
    background-image: url(../images/TechEvents_LIGHT_HL.png);
    width: 48px;
    height: 48px;
    cursor: default;
    transform: scale(1.1);
    transition: ease-in-out 0.4s;
}

/*LogTab*/
.tech-log-img-nav-parent .tech-log-img-nav {
    background-image: url(../images/history.png);
    width: 48px;
    height: 48px;
}

.sidebar .nav-item a.active .tech-log-img-nav {
    background-image: url(../images/history_HL.png);
    width: 48px;
    height: 48px;
}

.tech-log-img-nav-parent:hover .tech-log-img-nav {
    background-image: url(../images/history_HL.png);
    width: 48px;
    height: 48px;
    cursor: default;
    transform: scale(1.1);
    transition: ease-in-out 0.4s;
}

.sidebar .nav-item a {
    color: dimgray;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    /* line-height: 3rem;*/
}

.product-nav-hover:hover {
}

.sidebar .nav-item a.active {
    background-color: black;
    color: white;
}

.sidebar .nav-item a:hover {
    background-color: black;
    color: white;
}

.sidebar .nav-item a.active > svg * {
    background-color: black;
    color: white;
    fill: white;
}

.sidebar .nav-item a:hover > svg * {
    background-color: black;
    color: white;
    fill: white;
}

.nav-link {
    display: block;
    padding: .5rem;
}

.content {
    padding-top: 1.1rem;
}

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

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

/*.invalid {*/
/*    outline: 1px solid red;*/
/*}*/

.validation-message {
    color: red;
}

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

.custom-select {
    position: relative;
    width: auto;
    /* display: inline; */
    flex-direction: column;
    border-width: 2px 2px 2px 2px;
    border-style: solid;
    border-color: dimgray;
}

.custom-button {
    background-color: green;
    border-color: dimgray;
    border: solid;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    float: right;
    left: 500px;
}

* {
    box-sizing: border-box;
}

.column {
    float: left;
    padding: 5px;
    /*height: 300px;*/ /* Should be removed. Only for demonstration */
}

.left {
    display: block;
    width: 25%;
    height: 200px;
    /*background-color: gray;*/
}

.right {
    display: block;
    width: 75%;
    /*background-color: lightgray;*/
}

.padTop {
    margin-top: -0.5rem;
}

.marginTopH5 {
    margin-bottom: 15px;
    white-space: break-spaces;
}

.MainFormGray {
    height: max-content;
    width: 100%;
    background-color: rgb(64, 64, 64);
    color: white;
    border: 10px solid rgb(64, 64, 64);
    border-top: 15px solid rgb(64, 64, 64);
    margin-top: 10px;
}

.SubFormLightGray {
    background-color: rgb(114, 114, 114);
    border: 10px solid rgb(114, 114, 114);
    border-bottom: -5px solid rgb(114, 114, 114);
    color: white;
}

.SelectVizco {
    height: 32px;
    width: 200px;
    background-color: dimgray;
    color: white;
    overflow: hidden;
}

.SelectVizco:focus {
    background-color: rgb(80, 80, 80)
}

.InputVizco {
    background-color: dimgray;
    color: white;
    border: none;
    border-style: none;
    font-size: 1.2rem;
    padding-bottom: 5px;
}

.InputVizco:focus {
    background-color: dimgray;
    color: white;
}

.InputVizcoTable {
    color: white;
}

/*.SelectVizco:focus {
    background-color: rgb(80, 80, 80)
}
*/
.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 700ms linear infinite;
    top: 70%;
    left: 50%;
    position: absolute;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}


/*.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
}*/

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    /*    background-color: #2196F3;*/
    overflow: auto;
    white-space: nowrap;
    color: white;
}

.grid-item {
    /*    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);*/
    padding: 5px;
    text-align: left;
    position: relative;
}

.label {
    display: inline-block;
    text-align: right;
    width: 110px;
}

.input {
    padding: 5px 10px;
}

.labelDate {
    display: inline-block;
    text-align: right;
    width: 110px;
    padding-top: -25px;
}

.inputDate {
    padding: 5px 10px;
    padding-top: -25px;
}

/*.inputCheck {
    padding: 5px 10px;
    text-align:right;
}
.labelcheck {
    display: inline-block;
    text-align: right;
    width:25px;
}*/

.labelcheck {
    display: block;
    padding-left: 115px;
    /*text-indent: -15px;*/
}

.labelcheck:hover {
    cursor: pointer;
}

.inputCheck {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: central;
    position: relative;
    *overflow: hidden;
}

.inputCheck:hover {
    cursor: pointer;
}

.labelcheckDate {
    display: block;
    padding-left: 115px;
    /*text-indent: -15px;*/
}

.labelcheckDate:hover {
    cursor: pointer;
}

.inputCheckDate {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: central;
    position: relative;
    *overflow: hidden;
}

.inputCheckDate {
    cursor: pointer;
}

/*search box css start here*/
.search-sec {
    padding: 0rem;
}

.search-slt {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    height: 2rem !important;
    border-radius: 0;
}

.search-slt-check {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: none;
    height: 2rem !important;
    border-radius: 0;
}

.buttonVizCoSearch {
    line-height: 12px;
    width: 18px;
    font-size: 8pt;
    font-family: tahoma;
    margin-top: 1px;
    margin-right: 2px;
}

.SetTextRight {
    text-align: right;
    font-weight: bold;
}


.testMobile {
    display: none;
}


.techlogs-header {
    font-size: 1.8em;
}

.c2 {
    background: green;
    float: right;
}

/*SAM START*/


.user-date-logs {
    display: flex;
    align-content: center;
    align-items: stretch;
    margin-bottom: 0.5em;
}

.table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after, table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox:after {
    display: block;
    position: absolute;
    top: auto !important;
    left: 50%;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
}

.no-sort::after {
    display: none !important;
}

.no-sort::before {
    display: none !important;
}

.no-sort {
    pointer-events: none !important;
    cursor: default !important;
}

.productUsedCheckBox {
    vertical-align: middle;
    text-align: center;
}

.ShowDropDown {
    display: block;
}

.tech_email_link {
    font-size: 1.2em;
    color: #6cb1ff;
}

.techevent_article_table_desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8; /* number of lines to show */
    -webkit-box-orient: vertical;
}

.product-img {
    border: 2px solid #fff;
    /*background: url(img/tiger.png) no-repeat;*/
    -moz-box-shadow: 10px 10px 5px #ccc;
    -webkit-box-shadow: 10px 10px 5px #ccc;
    box-shadow: 10px 10px 5px #ccc;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
}

.img-transform {
    transform: scale(1.0);
    transition-duration: 0.5s;
}

.img-transform:hover {
    transform: scale(1.3);
    transition-duration: 0.5s;
}

.btn-transform {
    transform: scale(1.0);
    transition: all .4s ease-out;
}

.btn-transform:hover {
    transform: scale(1.2);
    transition: all .4s ease-out;
}

/*#plain_text_btn {
    text-align: justify !important;
    background: none !important;
    border: none !important;
    border-style: none !important;
    border-color: transparent !important;
    outline-color: springgreen;
}*/

.plain_text_btn {
    text-align: justify !important;
    background: none !important;
    border: none !important;
    border-style: none !important;
}

.plain_text_btn:focus {
    border-color: transparent !important;
    background: none !important;
    border: none !important;
    border-style: none !important;
    outline: none;
}

.plain_text_btn:hover {
    background: none !important;
    border: none !important;
    border-style: none !important;
}

.plain_text_btn:active {
    border-color: transparent !important;
    background: none !important;
    border: none !important;
    border-style: none !important;
}


.textarea {
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: inherit;
    padding: 1px 6px;
}

.width-machine {
    /*   Sort of a magic number to add extra space for number spinner */
    padding: 0 1rem;
}

.textarea {
    display: block;
    width: 100%;
    overflow: hidden;
    resize: both;
    min-height: 40px;
    line-height: 20px;
}

.textarea[contenteditable]:empty::before {
    content: "Placeholder still possible";
    color: gray;
}

.blazored-toast-container {
    z-index: 3 !important;
}


.techEventSearchImg:hover {
    cursor: pointer;
}

/*BLAZORED MODAL START*/
.blazored-modal-container {
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

/*BLAZORED MODAL START*/
.blazored-modal-container {
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.blazored-modal-overlay {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
}

.blazored-modal {
    display: flex;
    z-index: 11;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px !important;
    border: 1px solid #fff;
    padding: 0.0rem !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}

.blazored-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0 2rem 0;
}

.blazored-modal-title {
    margin-bottom: 0;
}

.blazored-modal-close {
    /* padding: 1rem;*/
    /*margin: -1rem -1rem -1rem auto;*/
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
}

.blazored-modal-center {
    align-items: center;
    justify-content: center;
}

.blazored-modal-topleft .blazored-modal {
    position: absolute;
    top: 32px;
    left: 32px;
}

.blazored-modal-topright .blazored-modal {
    position: absolute;
    top: 32px;
    right: 32px;
}

.blazored-modal-bottomleft .blazored-modal {
    position: absolute;
    bottom: 32px;
    left: 32px;
}

.blazored-modal-bottomright .blazored-modal {
    position: absolute;
    bottom: 32px;
    right: 32px;
}

.blazored-modal-scrollable {
    display: flex;
    max-height: calc(100% - 1rem);
}

.blazored-modal-scrollable .blazored-modal-content {
    overflow-y: auto;
}

.blazored-modal-scrollable .blazored-modal-footer, .blazored-modal-scrollable .blazored-modal-header {
    flex-shrink: 0;
}

.blazored-modal-content {
    overflow-y: auto;
}

/*.position-middle[b-mwsrhhqq2g] {
  display: flex!important;
  flex-direction: inherit!important;
  justify-content: center!important;
}*/
/*BLAZORED MODAL END*/

/*Signature*/
#sig-canvas {
    border: 2px dotted #CCCCCC;
    border-radius: 15px;
    cursor: crosshair;
}

.col-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    align-content: stretch;
}

.sommaire-layout {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 1em;
    width: 100%;
}

.current-week {
    display: inline-flex;
    align-items: center;
}

.user-name-svg {
    fill: black;
}

.user-name-svg :hover {
    fill: white;
}

.user-info-card {
    text-align: end;
}

.edit-btn {
    background-color: forestgreen;
    width: 40px;
    height: 38px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.1em;
}


.delete-btn {
    background-color: red;
    width: 40px;
    height: 38px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.1em;
    font-size: 1.2em;
}


.download-btn {
    color: #fff;
    width: 40px;
    height: 38px;
    background-color: #17a2b8;
    border-color: #17a2b8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.1em;
}


.btn-transform {
    transform: scale(1.0);
    transition: all .4s ease-out;
}

.btn-transform:hover {
    transform: scale(1.1);
    transition: all .4s ease-out;
}

.custom-btn-horizontal-group {
    display: inline-flex;
}


.table-title {
    text-align-last: center;
    border-style: groove;
    margin-bottom: 0px;
    font-family: Montserrat;
    padding: 5px;
    background-color: dimgray;
}

.table-bordered {
    border: 3px solid #dee2e6;
}

.table-header {
    font-family: Cabin;
}

.table-cell-whitebg {
    background-color: white;
    vertical-align: middle !important;
}

.table-responsive {
    overflow-x: auto !important;
}

table.table-bordered.dataTable {
    border-right-width: 3px !important;
}

tr td:first-child {
    width: 1%;
    white-space: nowrap;
}

.btn-neutral {
    color: black;
    background-color: lightgray;
    border-color: lightgray;
}


.btn-neutral.focus, .btn-neutral:focus {
    box-shadow: 0 0 0 .2rem rgb(80, 80, 80)
}

.btn-neutral.disabled, .btn-neutral:disabled {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8
}

.InputVizco_Transparent {
    background-color: transparent;
    color: black;
    border: none;
    border-style: none;
}

.InputVizco_Transparent:focus {
    background-color: transparent;
    color: black;
}

.InputVizcoTable_Transparent {
    color: white;
}


.row {
    margin-bottom: 0.5rem !important;
    margin-right: 0px;
}


.nav {
    display: block !important;
}

.daily-techevent-card {
    margin-bottom: 1rem;
    margin-right: 1rem;
    margin-top: 1rem;
    display: inline-flex;
    max-width: 20rem;
    min-width: 20rem;
    min-height: 17rem;
}

.product-detail {
    min-width: 30vw;
}

.product-detail-body {
    font-size: 1.1em;
    font-weight: 500;
    display: flex;
    align-items: center;
    white-space: normal;
}

.box-shadow {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.error-msg {
    font-weight: 500;
    color: red;
    background-color: rgb(252, 70, 70, 0.30);
    border-radius: 5px;
    padding-right: 0.3rem;
    padding-left: 0.3rem;
}

.col-form-label {
    font-weight: 500;
}


.dropdown-measurements {
    height: 2rem;
    width: auto;
}

.measurement-header {
    /*uncomment if you want to enable the sticky*/
    /*position: sticky;*/
    /*top: 0px;*/
    /*top: -1px;*/ /* ➜ the trick */
    /*padding-top: calc(1em + 1px);*/ /* ➜ compensate for the trick */
    padding: calc(1em + 1px);
    z-index: 2;
    background-color: rgb(250, 250, 250, .75);
    display: flow-root;
    transition: .1s;
    width: 100%;
}

/* styles for when the header is in sticky mode */
.measurement-header.isSticky {
    background-color: transparent;
}

.measurement-header.isSticky .odDescInst {
    display: none;
}

.measurement-header.isSticky .odDescInst .crop {
    display: none;
}

.measurement-image {
    /*mix-blend-mode: multiply;*/
    float: left;
    width: auto;
    height: auto;
    max-width: 250px;
    max-height: 300px;
    margin-right: 10px;
    margin-bottom: 5px;
    min-width: 100px;
}

.measurement-image-thumbnail {
    /*mix-blend-mode: multiply;*/
    float: left;
    width: 100%;
    height: 100%;
    max-width: 150px;
    max-height: 175px;
    object-fit: contain;
}

.measurement-container {
    --gap: 1em;
    --columns: 3;
    max-width: 60rem;
    margin: 0 auto;
    display: grid;
    columns: var(--columns);
    gap: var(--gap);
}

.measurement-container > * {
    break-inside: avoid;
    margin-bottom: var(--gap);
}

.measurement-section {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    border-style: groove;
    white-space: nowrap;
    border-width: medium;
    padding: 0.5em;
    white-space: nowrap;
    border-radius: 15px;
}

.measurement-section > * + * {
    margin-top: var(--flow-space, var(--spacer));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.intervention-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}


/*TEST*/
.uncrop {
    overflow: hidden;
    text-overflow: ellipsis;
    /*max-height: 250px;*/
    display: inline !important;
}


.odDescInst {
    max-width: 100%;
    display: block;
    min-width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



.measurement-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}


.div-grid-row-span1 {
    grid-area: auto;
}

.div-grid-row-span2 {
    grid-area: auto /auto / span 2 / auto;
}

.div-grid-row-span3 {
    grid-area: auto /auto / span 3 / auto;
}

.div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.div3 {
    grid-area: 1 / 3 / 2 / 4;
}

.div4 {
    grid-area: 2 / 3 / 5 / 4;
}

.div4 .short {
}

.div5 {
    grid-area: 2 / 1 / 3 / 2;
}

.div6 {
    grid-area: 2 / 2 / 3 / 3;
}

.div7 {
    grid-area: 3 / 1 / 4 / 2;
}

.div8 {
    grid-area: 3 / 2 / 4 / 3;
}

.div9 {
    grid-area: 4 / 1 / 5 / 2;
}

.div10 {
    grid-area: 4 / 2 / 5 / 3;
}

.div11 {
    grid-area: 5 / 1 / 6 / 2;
}

.div12 {
    grid-area: 5 / 2 / 6 / 3;
}

.div13 {
    grid-area: 5 / 3 / 6 / 4;
}

@media (min-width: 900px) {


    app {
        flex-direction: row;
    }

    .sidebar {
        width: auto;
        max-width: 350px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

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

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

/*mobile section*/
/*--mobile-breakpoint: 767.98px;*/
@media (max-width: 767.98px) {
    
    .search-panel {
        width: fit-content;
        max-width: 100%;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 16px;
        padding-top: 0.5rem;
        padding-left: 1.5rem;
        padding-bottom: 1rem;
        padding-right: 1rem;
    }
    
    .px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .modal-content-scrollable {
        max-height: 95vh; /* Adjust as needed */
        overflow-y: auto; /* Enable vertical scrolling */
    }


    .content {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    body {
        overscroll-behavior-y: contain;
    }

    .attachment-image-expanded {
        max-width: 80vw;
        height: 80vh;
        object-fit: contain;
        object-position: center;
    }

    .lightbox-modal-content {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 80vw;
        text-align: center;
        /* border-radius: 25px; */
        overflow: hidden;
        object-fit: contain;
    }

    .measurement-image {
        /*mix-blend-mode: multiply;*/
        float: left;
        width: auto;
        height: auto;
        max-width: 100%;
        margin-right: 10px;
        margin-bottom: 5px;
        min-width: 100px;
    }

    /*remove padding from container to gain real estate */
    .container {
        width: 100%;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto;
        margin-left: auto;
    }

    /*If screen is not full size show +/- btns*/
    .responsive-btns {
        display: inline;
    }

    .dropdown-measurements {
        height: 2rem;
        width: inherit !important;
    }

    .SetTextRight {
        text-align: unset;
    }

    .dtr-data {
        white-space: break-spaces !important;
    }

    .daily-techevent-card {
        margin-bottom: 1rem;
        margin-right: 1rem;
        display: inline-flex;
        max-width: 20rem;
        min-width: 20rem;
    }

    .product-detail-body {
        font-size: 1.1em;
        max-width: 90vw;
        font-weight: 500;
        align-items: center;
        white-space: break-spaces;
        flex-flow: wrap;
        padding: 0.5rem;
        padding-left: 2px;
    }


    .one {
        display: none;
    }

    .testMobile {
        display: grid;
    }

    .current-week {
        flex: 0 0 100%;
        align-items: center;
        justify-content: center;
    }

    .sommaire-layout {
        display: inline-flex;
        flex-direction: row;
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }


    .user-date-logs {
        display: flex;
        align-content: center;
        align-items: stretch;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .user-log-select {
        order: 0;
    }

    .techlogs-header {
        font-size: 1.8em;
    }

    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
        place-content: center;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }

    .user-info-card {
        text-align: start !important;
    }

    .card-header {
        white-space: normal;
    }

    .measurement-wrapper {
        display: flex;
        flex-direction: column;
    }

    .measurement-header {
        position: relative;
        top: 0px;
        z-index: 2;
        background-color: rgb(250, 250, 250, .75);
        display: flow-root;
        width: 100%;
        overflow: hidden;
        padding: 1em;
    }

    @media (orientation: landscape) {
        .product-detail-body {
            font-size: 1.1em;
            max-width: 90vw;
            font-weight: 500;
            align-items: center;
            white-space: break-spaces;
            flex-flow: nowrap;
            padding: 0.5rem;
            padding-left: 2px;
        }
    }
}

/*MOBILE END*/
/*TABLET vertical START*/
@media (min-width: 768px) and (max-width: 900px) {
    body {
        overscroll-behavior-y: contain;
    }
    
    .modal-content-scrollable {
        max-height: 95vh; /* Adjust as needed */
        overflow-y: auto; /* Enable vertical scrolling */
    }


    .search-panel {
        width: fit-content;
        max-width: 100%;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 16px;
        padding-top: 0.5rem;
        padding-left: 1.5rem;
        padding-bottom: 1rem;
        padding-right: 1rem;
    }


    .attachment-image-expanded {
        max-width: 80vw;
        height: 80vh;
        object-fit: contain;
        object-position: center;
    }

    .lightbox-modal-content {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 80vw;
        text-align: center;
        /* border-radius: 25px; */
        overflow: hidden;
        object-fit: contain;
    }

    .measurement-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .isSticky > .isStickyImage {
        /* Styles for .isStickyImage when it's a direct child of .isSticky */
        height: 100px !important;
    }

    /*If screen is not full size show +/- btns*/
    .responsive-btns {
        display: inline;
    }

    .dropdown-measurements {
        height: 2rem;
        width: inherit !important;
    }

    .intervention-row {
        white-space: nowrap;
        text-align: left !important;
        display: block !important;
    }

    /*Dont want it to the right on tablet*/
    .SetTextRight {
        text-align: left !important;
        font-weight: bold;
    }

    .px-4 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }
}

/*TABLET vertical END*/
/*TABLET LANDSCAPE START*/
@media (min-width: 768px) and (max-width: 1279px) and (orientation: landscape) {
    .te-container {
        display: flex;
        flex-direction: column;
        width: 90vw;
    }
    .modal-content-scrollable {
        max-height: 95vh; /* Adjust as needed */
        overflow-y: auto; /* Enable vertical scrolling */
    }

    body {
        overscroll-behavior-y: contain;
    }

    /*If screen is not full size show +/- btns*/
    .responsive-btns {
        display: inline;
    }

    .dropdown-measurements {
        height: 2rem;
        width: inherit !important;
        max-width: 20vw;
    }

    .intervention-row {
        white-space: nowrap;
        text-align: left !important;
        display: block !important;
    }

    /*Dont want it to the right on tablet*/
    .SetTextRight {
        text-align: left !important;
        font-weight: bold;
    }

    .isSticky > .isStickyImage {
        /* Styles for .isStickyImage when it's a direct child of .isSticky */
        height: 200px !important;
        margin-top: 10px;
    }
}

/*TABLET LANDSCAPE END*/

/* Desktop and larger devices */
@media only screen and (min-width: 1025px) {
    .attachment-image-expanded {
        max-width: 35vw;
        height: 80vh;
        object-fit: contain;
        object-position: center;
    }
}

/*XL tablets Portrait mode*/
@media only screen and (min-width: 900px) and (max-width: 1024px) and (orientation: portrait) {

    .measurement-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    .modal-content-scrollable {
        max-height: 95vh; /* Adjust as needed */
        overflow-y: auto; /* Enable vertical scrolling */
    }

}

.form-input {
    margin-bottom: 15px;
}

.form-input label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-input input[type="text"],
.form-input textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* only when orientation is in portrait mode */
@media all and (orientation: portrait) and (max-width: 750px) {
    .rotation-prompt {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8); /* Darken the background */
        z-index: 1050; /* Ensure it's on top */
        color: white;
        text-align: center;
        padding: 20px;
        font-size: 1.5rem;
        justify-content: center;
        align-items: center;
    }
}