html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

:target {
   scroll-margin-top: 60px; /* Adjust based on the height of your header */
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."f
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

Datagrid
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}


.Dropdown-Collaps {
   flex: 4;
   margin-right: 10px;
}

   .Dropdown-Collaps input, .Dropdown-Collaps select {
      width: 8%; /*everytime the page refreshes css goes away here for some reason*/
      padding: 6px;
      border: 2px solid #ccc;
      border-radius: 5px; 
      box-sizing: border-box; 
      font-size: 12px;
      font-weight: bold;
   }

   .Dropdown-Collaps select {
      cursor: pointer;
   }

      .Dropdown-Collaps select:hover {
         background-color: #f0f0f0;
      }


 /*Styling for the data grid container*/ 
.data-grid-container {
   width: 100%;
   max-width: 1600px;  /*Double the original width */
   border-radius: 5px;
   overflow: hidden;
   border-collapse: collapse;  /*Collapse borders to avoid double borders */
}

 /*Styling for the data grid header*/ 
.data-grid-header {
   display: flex;
   /*background-color: #f0f0f0;*/
   border-bottom: 1px solid #ddd;
   color: #66d9ef;
}

.header-cell {
   flex: 1;
   padding: 8px;
   text-align: center;
   border-right: 1px solid #ddd;  /*Add vertical lines*/ 
   font-size: 12px;
}

   .header-cell:last-child {
      border-right: none;  /*Remove vertical line from the last header cell */
   }

/* Styling for the data grid body 
.data-grid-body {
    Empty for now 
}*/

/* Styling for data grid rows and cells*/ 
.data-grid-row {
   display: flex;
   border-bottom: 1px solid #ddd;
}

.data-cell {
   flex: 1;
   padding: 8px;
   text-align: center;
   border-right: 1px solid #ddd; /*Add vertical lines*/
   font-size: 12px;
}

   .data-cell:last-child {
      border-right: none;  /*Remove vertical line from the last data cell*/ 
   }

.data-grid-row.align-middle {
   display: flex;
   align-items: center; /* This vertically centers children */
}







/*.html {
   scroll-behavior: smooth;
}*/

body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   background-color: #f0f0f0;
}

.navbar {
   /*background-color: #333;*/
   background-color: #444;
   overflow: hidden;
}

   .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
   }

      .navbar a:hover {
         background-color: #ddd;
         color: black;
      }

.container {
   max-width: 1200px;
   margin: 50px auto;
   padding: 20px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   font-size: 1em;
   /*transform: scale(0.75);*/
   /* float: left; */
}

.testing-container {
   text-align: center;
   max-width: 1200px;
   margin: 50px auto;
   padding: 20px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.job-list-container {
   text-align: center;
   max-width: 1200px;
   margin: 50px auto;
   padding: 20px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.error-container {
   max-width: 1200px;
   margin: 50px auto;
   padding: 20px;
   background-color: #444;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   font-size: 1em;
   /*transform: scale(0.75);*/
   /* float: left; */
}

.row {
   display: flex;
   align-items: center;
   margin-bottom: 15px;
}

.fabric-specs-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 1rem;
   margin-top: 1rem;
}

.spec-item {
   display: flex;
   flex-direction: column;
   align-items: stretch;
}

.label {
   flex: 1;
   text-align: right;
   margin-bottom: 0.5rem;
   font-weight: bold;
   font-size: 14px;
}

.center-label {
   flex: 1;
   text-align: center;
   margin-bottom: 0.5rem;
   font-weight: bold;
   font-size: 14px;
}

.input-field-fabric-specs {
   flex: 4;
   margin-right: 10px;
}

   .fabric-specs input, .input-field-fabric-specs select {
      width: 40%;
      padding: 6px;
      border: 2px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: bold;
   }

.input-field-fabric-specs select:hover {
   background-color: #f0f0f0;
}

   .input-field-Backstop select {
      cursor: pointer;
   }

select {
   width: 100%;
   padding: 0.5rem;
}

.error-label {
   flex: 1;
   font-weight: bold;
   color: red;
}

.SpecTitles {
   flex: 3;
   margin-right: 40px;
   font-size: 14px;
}

.input-field {
   flex: 4;
   margin-right: 10px;
   width: 100%;
}

   .input-field input, .input-field select {
      width: 100%;
      padding: 6px;
      border: 2px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: bold;
   }

      .input-field select:hover {
         background-color: #f0f0f0;
      }

   .input-field select {
      cursor: pointer;
   }

.job-list-input-field {
   flex: 4;
   margin-right: 10px;
}

   .job-list-input-field input, .job-list-input-field select {
      width: 40%;
      padding: 6px;
      border: 3px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: bold;
   }

      .job-list-input-field select:hover {
         background-color: #f0f0f0;
      }

   .job-list-input-field select {
      cursor: pointer;
   }

.input-field-Backstop {
   flex: 4;
   margin-right: 10px;
}

   .input-field-Backstop input, .input-field-Backstop select {
      width: 40%;
      padding: 8px;
      border: 4px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: bold;
   }

      .input-field-Backstop select:hover {
         background-color: #f0f0f0;
      }

   .input-field-Backstop select {
      cursor: pointer;
   }

.input-field-Quantity {
   flex: 4;
/*   margin-right: 10px;*/
}

   .input-field-Quantity input, .input-field-Quantity select {
/*      width: 14%;
      padding: 6px;
      border: 4px solid #ccc;
      border-radius: 18px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: bold;*/
      width: 100%; /* Set the input to fill the entire cell */
      padding: 6px;
      border: 2px solid #ccc; /* Adjust the border thickness */
      border-radius: 18px; /* Slightly rounded corners */
      box-sizing: border-box; /* Ensure padding and border are included in width */
      font-size: 12px;
      font-weight: bold;
   }

      .input-field-Quantity input:hover {
         background-color: #f0f0f0;
      }

.input-field-Line-Quantity {
   flex: 4;
   /*   margin-right: 10px;*/
}

   .input-field-Line-Quantity input, .input-field-Line-Quantity select {
      width: 100%; /* Set the input to fill the entire cell */
      padding: 6px;
      border: 2px solid #ccc; /* Adjust the border thickness */
      border-radius: 18px; /* Slightly rounded corners */
      box-sizing: border-box; /* Ensure padding and border are included in width */
      font-size: 12px;
      font-weight: bold;
   }

.input-field-Line-Quantity input:hover {
   background-color: #f0f0f0;
}

.input-field-TieToExisting {
   flex: 4;
   margin-right: 10px;
}

   .input-field-TieToExisting input, .input-field-TieToExisting select {
/*      width: 18%;
      padding: 8px;
      border: 4px solid #ccc;
      border-radius: 20px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: bold;*/
      width: 100%; /* Set the input to fill the entire cell */
      padding: 6px;
      border: 2px solid #ccc; /* Adjust the border thickness */
      border-radius: 18px; /* Slightly rounded corners */
      box-sizing: border-box; /* Ensure padding and border are included in width */
      font-size: 12px;
      font-weight: bold;
   }

   .input-field-TieToExisting select {
      cursor: pointer;
   }

   .input-field-TieToExisting input:hover {
      background-color: #f0f0f0;
   }


.input-field-single-cell {
   flex: 4;
   margin-right: 10px;
}

   .input-field-single-cell input, .input-field-single-cell select {
      /*      width: 18%;
      padding: 8px;
      border: 4px solid #ccc;
      border-radius: 20px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: bold;*/
      width: 60%; /* Set the input to fill the entire cell */
      padding: 6px;
      border: 2px solid #ccc; /* Adjust the border thickness */
      border-radius: 5px; /* Slightly rounded corners */
      box-sizing: border-box; /* Ensure padding and border are included in width */
      font-size: 12px;
      font-weight: bold;
   }

   .input-field-single-cell select {
      cursor: pointer;
   }
.input-field-single-cell select:hover {
   background-color: #f0f0f0;
}



.input-field-perimeter-length {
   flex: 4;
   margin-right: 10px;
}
   .input-field-perimeter-length input, .input-field-perimeter-lengthg select {
      width: 60%;
      padding: 8px;
      border: 2px solid #ccc;
      border-radius: 20px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: bold;
   }

   .input-field-perimeter-length select {
      cursor: pointer;
   }

   .input-field-perimeter-length input:hover {
      background-color: #f0f0f0;
   }

.input-field-Run-Description {
   position: center;
}

.Result-Show {
   font-size: 15px;
   font-weight: bold;
}

   .input-field-Run-Description input, .input-field-Run-Description select {
      width: 100%;
      padding: 5px;
      border: 3px solid #ccc;
      border-radius: 20px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: bold;
      margin: 0 auto;
      justify-content: center;
      display: flex;
   }

      .input-field-Run-Description input:hover {
         background-color: #f0f0f0;
      }

.input-regular-checkbox {
   flex: 4;
   /*   margin-right: 10px;*/
}

   .input-regular-checkbox input, .input-regular-checkbox select {
      width: 14%;
      padding: 6px;
      border: 4px solid #ccc;
      border-radius: 18px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: bold;
   }

      .input-regular-checkbox input:hover {
         background-color: #f0f0f0;
      }


 .FrameworkBtn {
   padding: 8px 12px;
   background-color: #4CAF50;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 12px;
   position: center;
   margin-right: 20px;
   margin: 20px;
}

   .FrameworkBtn:hover {
      background-color: #45a049;
   }

.RunBtn {
   padding: 10px 25px;
   background-color: #4CAF50;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 14px;
   position: center;
   margin-right: 20px;
   margin: 20px;
}

   .RunBtn:hover {
      background-color: #45a049;
   }

.Backstop-Preview-Button {
   padding: 10px 25px;
   background-color: #4987bb;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 14px;
   position: center;
   margin-right: 20px;
   margin: 20px;
}

   .Backstop-Preview-Button:hover {
      background-color: #6196c4;
   }

.TestRunApproveOrCloseBtn {
   padding: 10px 12px;
   background-color: #FFA500;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 14px;
   position: center;
   position: center;
   margin-right: 20px;
   margin: 20px;
}

   .TestRunApproveOrCloseBtn:hover {
      background-color: #FFB52E;
   }

.DeleteBtn {
   padding: 10px 12px;
   background-color: #b22222;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 14px;
   position: center;
   position: center;
   margin-right: 20px;
   margin: 20px;
}

   .DeleteBtn:hover {
      background-color: #cd5c5c;
   }

.RestoreBtn {
   padding: 10px 12px;
   background-color: #007bff;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 14px;
   position: center;
   position: center;
   margin-right: 20px;
   margin: 20px;
}

   .RestoreBtn:hover {
      background-color: #0069d9;
   }

.list-container {
   margin-bottom: 20px;
   border: 2px solid #eee;
   border-radius: 10px;
   overflow-y: auto;
   max-height: 200px;
}

.outside-list-container {
   max-width: 800px;
   margin: 50px auto;
   padding: 20px;
   background-color: #fff;
   border-radius: 20px;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.list-item {
   padding: 10px;
   border-bottom: 1px solid #eee;
   cursor: pointer;
}

   .list-item:hover {
      background-color: #f0f0f0;
   }

   .list-item:last-child {
      border-bottom: none;
   }

.list-buttons {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

   .list-buttons button {
      padding: 8px 20px;
      background-color: #4987bb;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 12px;
   }

      .list-buttons button:hover {
         background-color: #6196c4;
      }



/* text box pop up */
.modal {
   display: none;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgba(0,0,0,0.4);
}

.modal-content {
   background-color: #fefefe;
   margin: 10% auto;
   padding: 20px;
   border: 1px solid #888;
   width: 40%;
   border-radius: 5px;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.close {
   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
}

   .close:hover,
   .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
   }
/*
                  input[type=text] {
                     width: 100%;
                     padding: 12px 20px;
                     margin: 8px 0;
                     box-sizing: border-box;
                     border: 1px solid #ccc;
                     border-radius: 4px;
                     resize: none;
                  }

                  input[type=button] {
                     background-color: #4CAF50;
                     color: white;
                     padding: 14px 20px;
                     border: none;
                     border-radius: 4px;
                     cursor: pointer;
                     float: right;
                  }

                     input[type=button]:hover {
                        background-color: #45a049;
                     }
               */

/* Style for the hamburger menu */
/*.hamburger-menu {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 999;
   cursor: pointer;
}

   .hamburger-menu .bar {
      display: block;
      width: 25px;
      height: 3px;
      background-color: #333;
      margin: 5px auto;
      transition: all 0.3s ease;
   }*/

/* Style for the menu items */
/*.menu-items {
   display: none;
   position: fixed;
   bottom: 70px;*/ /* Adjusted position */
   /*right: 60px;
   z-index: 998;
   background-color: #fff;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

   .menu-items ul {
      list-style: none;
      padding: 0;
      margin: 0;
   }

   .menu-items li {
      margin-bottom: 10px;
   }

   .menu-items a {
      text-decoration: none;
      color: #333;
      font-size: 16px;
   }

      .menu-items a:hover {
         background-color: #f0f0f0;
      }*/


/*body {
   font-family: Arial, sans-serif;
   margin: 0;
}*/

.container-side {
   display: flex;
   flex-direction: row;
   height: 100vh;
}

.left-strip {
   /*position: fixed;*/
   top: 0;
   left: 0;
   width: 18%; /* Adjust width as needed */
   height: 100vh;
   background-color: #1a1a1a; /* Modern dark color */
   color: #fff;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

   .left-strip .logo h2 {
      font-size: 24px;
      letter-spacing: 2px;
      margin-bottom: 40px;
   }

   .left-strip nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: center;
      width: 100%;
   }

      .left-strip nav ul li {
         margin: 20px 0;
      }

         .left-strip nav ul li a {
            text-decoration: none;
            color: #fff;
            font-size: 18px;
            padding: 10px 0;
            display: block;
            transition: background 0.3s ease;
         }

            .left-strip nav ul li a:hover {
               background-color: #333;
               border-radius: 5px;
            }

.left-side {
   width: 60%;
   background-color: #f0f0f0;
   padding: 20px;
   height: 100vh;
   overflow-y: auto;
   box-sizing: border-box;
}

.right-side {
   width: 40%;
   background-color: #1a1a1a;
   color: #fff;
   padding: 20px;
   height: 100vh;
   overflow: auto; /*changed from hidden to allow right side to be scroll*/
   box-sizing: border-box;
   scroll-behavior: smooth; /*changed from hidden to allow right side to be scroll*/
}

   .right-side h1 {
      color: #fff;
   }

 /*Add smooth scrolling */
.left-side {
   scroll-behavior: smooth;
}

.footer {
   background-color: #333;
   color: #fff;
   padding: 20px;
}



.footer-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.footer-left, .footer-center, .footer-right {
   width: 33%;
   padding: 20px;
}

   .footer-left h3, .footer-center h3, .footer-right h3 {
      color: #fff;
   }

.footer-bottom {
   background-color: #444;
   padding: 10px;
   text-align: center;
}


/*help button */
.help-btn {
   background-color: #007bff; /* Bright blue color */
   border: none;
   border-radius: 5px; /* Makes the button circular */
   color: #ffffff; /* White text color */
   padding: 10px 20px; /* Adds some padding */
   font-size: 16px; /* Sets the font size */
   cursor: pointer; /* Changes the cursor to a pointing hand */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow effect */
   margin-right: 20px; /* Adds space between help button and navbar items */
}

   .help-btn:hover {
      background-color: #0069d9; /* Darker blue color on hover */
   }

/*copy button */
.copy-btn {
   background-color: #007bff;
   border: none;
   border-radius: 5px;
   color: #ffffff;
   padding: 5px 10px;
   font-size: 10px;
   cursor: pointer;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   margin-right: 30px;
}

   .copy-btn:hover {
      background-color: #0069d9;
   }

/*copy 2 button */
.copy2-btn {
   background-color: #007bff;
   border: none;
   border-radius: 5px;
   color: #ffffff;
   padding: 5px 10px;
   font-size: 10px;
   cursor: pointer;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   margin-right:10px;
}

   .copy2-btn:hover {
      background-color: #0069d9;
   }

/*copy 3 button */
.copy3-btn {
   background-color: #007bff;
   border: none;
   border-radius: 5px;
   color: #ffffff;
   padding: 5px 10px;
   font-size: 10px;
   cursor: pointer;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   margin-right: 8px;
}

.copy3-btn:hover {
   background-color: #0069d9;
}

/*copy 4 button */
.copy4-btn {
   background-color: #007bff;
   border: none;
   border-radius: 5px;
   color: #ffffff;
   padding: 5px 10px;
   font-size: 10px;
   cursor: pointer;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   margin-right: 34px;
}

.copy4-btn:hover {
   background-color: #0069d9;
}

.datagrid-label {
   font-size: 10px;
}








/* For mobile phones: */

@media only screen and (min-width: 768px) {
   /* For desktop: */
   .col-1 {
      width: 8.33%;
   }

   .col-2 {
      width: 16.66%;
   }

   .right-side {
      width: 25%;
   }

   .col-4 {
      width: 33.33%;
   }

   .col-5 {
      width: 41.66%;
   }

   .col-6 {
      width: 50%;
   }

   .col-7 {
      width: 58.33%;
   }

   .col-8 {
      width: 66.66%;
   }

   .col-9 {
      width: 75%;
   }

   .col-10 {
      width: 83.33%;
   }

   .col-11 {
      width: 91.66%;
   }

   .col-12 {
      width: 100%;
   }
}

.modern-list-box {
   width: 100%; /* Half the typical 200px width */
   height: 85px;
   font-size: 14px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background-color: #f9f9f9;
   border: 1px solid #ccc;
   border-radius: 8px;
   padding: 6px;
   color: #333;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
}

   .modern-list-box:focus {
      border-color: #007bff;
      box-shadow: 0 0 4px rgba(0,123,255,0.5);
   }

   .modern-list-box option {
      padding: 4px;
   }


.popup-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5);
   display: flex;
   justify-content: center;
   align-items: center;
}

.popup-box {
   background-color: white;
   padding: 20px;
   border-radius: 8px;
   width: 300px;
   text-align: center;
}

.confirm-btn, .cancel-btn {
   margin: 10px;
   padding: 10px 15px;
}

/*.container {
   width: 250px;
   margin: 20px auto;
   padding: 10px;
   border: 1px solid #ccc;
   text-align: center;
   border-radius: 8px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.content {
   display: none;
   margin-top: 10px;
   padding: 10px;
   background: #f9f9f9;
   border-radius: 4px;
}
    Testing Alex
*/