@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
   --primary: #0462fc;
   --secondary: #ffffff;
   --background: #F4F5F7;
   --text: #1A1A1A;
   --logo-img: '';
}

html,
body {
   font-family: 'Poppins', sans-serif;
   background-color: #F3F4F6;
}

.page-chrome {
   background: var(--background);
   min-height: 100vh;
   overflow-x: auto;
   min-width: 100%;
}

.page-chrome-border {
   padding: 20px;
}

/* Header styles */
.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
   background-color: #ffffff;
   border-radius: 8px;
   /* Rounded edges */
   border-bottom: 1px solid #E0E0E0;
   /* Light grey border at the bottom */
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
   /* Subtle shadow for a lift effect */
   margin-bottom: 20px;
   min-width: 750px;
}

   .header .logo {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      /* Dark grey for the text */
      background-image: var(--logo-img);
      background-size: contain;
      background-repeat: no-repeat;
      height: 50px;
      width: 275px;
      .logo-img

{
   height: 50px;
}

}

.header .user-details {
   display: flex;
   align-items: center;
   .user-icon

{
   transform: scale(1.5);
   color: var(--primary);
   margin-right: 10px;
   /* spacing between the icon and the text */
   display: flex;
   /* centers the content in the icon */
   align-items: center;
   /* vertically centers the content in the icon */
   justify-content: center;
   /* horizontally centers the content in the icon */
   flex-shrink: 0;
   /* prevents the icon from shrinking */
}

.user-name,
.user-company {
   white-space: nowrap;
   /* ensures the text doesn't wrap to the next line */
}

.user-name {
   font-weight: bold;
}

.user-company {
   color: #78859B;
}

}

/* Main content card styles */
.content-card {
   padding: 20px;
   background-color: #ffffff;
   border: 1px solid #E0E0E0;
   /* Light grey border */
   border-radius: 8px;
   /* Rounded edges */
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
   /* Subtle shadow for a lift effect */
   min-width: 750px;
}

/** headings / text content **/
h1 {
   font-size: 30px;
   margin-top: 0px;
   margin-bottom: 5px;
}

   h1.toolbar-title::after {
      content: "";
      display: block;
      width: 30%;
      height: 5px;
      background-color: var(--secondary);
      margin-top: 10px;
      border-radius: 10px;
   }

h2 {
   font-size: 25px;
   margin-top: 0px;
   margin-bottom: 5px;
}

h3 {
   font-size: 16px;
   color: var(--secondary);
   margin-top: 0px;
   margin-bottom: 0px;
}

h1:focus {
   outline: none;
}

a.dropdown-item {
   color: var(--primary);
}

   a.dropdown-item:hover {
      color: color-mix(in srgb, var(--primary) 50%, white);
   }

.btn,
.btn.show {
   color: var(--primary);
}

   .btn:hover {
      color: color-mix(in srgb, var(--primary) 50%, white);
   }

a,
.btn-link {
   color: var(--primary);
   font-weight: 600;
}

.btn-primary {
   height: 35px;
}

.btn-primary, .rz-primary {
   color: #fff;
   background-color: var(--primary) !important;
   border-color: var(--primary) !important;
   width: 138px;
   border-radius: 11px;
   margin-right: 5px;
}

   .btn-primary:hover, .rz-primary:hover,
   .btn-primary:focus, .rz-primary:focus,
   .btn-primary:active, .rz-primary:active,
   .btn-primary:first-child:active, .rz-primary:first-child:active,
   .btn.btn-primary:not(.btn-check) + .btn:active {
      color: #fff;
      border-color: var(--primary) !important;
      background-color: var(--primary) !important;
      box-shadow: 0px 0px 5px 5px color-mix(in srgb, var(--primary) 30%, white);
      -webkit-box-shadow: 0px 0px 5px 5px color-mix(in srgb, var(--primary) 30%, white);
      -moz-box-shadow: 0px 0px 5px 5px color-mix(in srgb, var(--primary) 30%, white);
   }

.btn-secondary {
   height: 35px;
}

.btn-secondary, .rz-secondary {
   color: var(--primary) !important;
   background-color: color-mix(in srgb, var(--primary) 10%, white) !important;
   border-color: color-mix(in srgb, var(--primary) 10%, white) !important;
   border-radius: 11px;
   margin-right: 5px;
}

   .btn-secondary:hover, .rz-secondary:hover,
   .btn-secondary:focus, .rz-secondary:focus,
   .btn-secondary:active, .rz-secondary:active,
   .btn-secondary:first-child:active, .rz-secondary:first-child:active,
   .btn.btn-secondary:not(.btn-check) + .btn:active {
      color: var(--primary);
      background-color: color-mix(in srgb, var(--primary) 10%, white);
      border-color: color-mix(in srgb, var(--primary) 10%, white);
      box-shadow: 0px 0px 5px 5px color-mix(in srgb, var(--primary) 30%, white);
      -webkit-box-shadow: 0px 0px 5px 5px color-mix(in srgb, var(--primary) 30%, white);
      -moz-box-shadow: 0px 0px 5px 5px color-mix(in srgb, var(--primary) 30%, white);
   }

.btn-custom {
   color: #fff;
   background-color: #0462fc;
   border-color: #0462fc;
   min-width: 138px;
   max-width: 250px;
   border-radius: 11px;
   height: 35px;
}

   .btn-custom:hover,
   .btn-custom:focus,
   .btn-custom:active {
      color: #fff;
      background-color: #0462fc;
      border-color: #0462fc;
      box-shadow: 0px 0px 5px 5px rgba(4, 98, 252, 0.22);
      -webkit-box-shadow: 0px 0px 5px 5px rgba(4, 98, 252, 0.22);
      -moz-box-shadow: 0px 0px 5px 5px rgba(4, 98, 252, 0.22);
   }

.btn-autowidth {
   width: auto !important;
}

.btn-delete {
   color: #E53232 !important;
   font-size: 14px;
   text-decoration: none;
   cursor: pointer;
}

/** radzen custom button styles **/
.rz-primary, .rz-secondary {
   height: 38px !important;
}

.rz-button-text {
   font-family: var(--bs-btn-font-family);
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
}
/** end of radzen custom button styles **/

/*
.valid.modified:not([type=checkbox]) {
   border: 1px solid #717E96;
}
*/

.red-bg {
   background-color: red !important;
   color: #000000;
}

.invalid {
   outline: 1px solid red;
}

.validation-message {
   color: red;
   font-size: 13px;
   white-space: pre-wrap;
}

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

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

.form-group {
   margin-bottom: 3px;
   & .form-checkbox-group-label

{
   color: #000000;
   line-height: 20px;
   padding-bottom: 0px;
   padding-top: 7px;
   font-weight: 600;
}

}

.form-checkbox-table {
   & .row>div

{
   height: 50px;
}

& .field-title > th {
   color: #78859B;
   font-size: 12px;
   font-weight: 700;
}

}

.multiLineDiv {
   white-space: pre-wrap;
}

.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   &:hover

{
   overflow: visible;
   & span

{
   position: relative;
   padding-right: 50px;
   background-color: #FFFFFF;
}

}
}

.form-floating > .form-control,
.form-floating > .form-select {
   border: 1px solid #717E96;
   border-radius: 6px;
   height: 45px;
   padding-top: 15px;
   padding-left: 15px;
   padding-bottom: 15px;
}

.form-floating > .form-control.readonly-control {
   border: none;
}

   .form-floating > .form-control.form-textarea {
      height: auto;
   }

.form-floating > .form-radio {
   padding-left: 0px;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   & label

{
   display: block;
   padding-bottom: 10px;
   width: 100%;
   font-family: 'Lato';
   & input[type=radio]

{
   margin-right: 10px;
}

}

& .form-radio-label {
   color: #000000;
   padding-left: inherit;
   line-height: 20px;
   display: block;
}

.radio-item {
   box-sizing: border-box;
   display: flex;
   flex-direction: column; 
   align-items: flex-start; 
   text-align: left; 
}

.radio-item label {
   display: flex;
   align-items: flex-start; 
}

.radio-item input[type="radio"] {
   flex-shrink: 0; 
}

.radio-item input[type="checkbox"] {
   flex-shrink: 0; 
}

.radio-item span {
   display: inline-block;
   word-break: break-word; 
}



}

.form-floating > .form-file {
   padding-left: 0px;
   padding-bottom: 15px;
   & label

{
   display: block;
   padding-bottom: 10px;
   width: 100%;
   font-family: 'Lato';
   & input[type=radio]

{
   margin-right: 13px;
}

}

& .form-file-label {
   color: var(--text);
   font-weight: 600;
   padding-left: inherit;
   line-height: 20px;
   display: block;
}

.form-file-select-label {
   line-height: 45px;
   padding-bottom: 0px;
   padding-top: 0px;
   padding-left: 0px;
   border: 1px solid #717E96;
   .prompt-text

{
   background-color: #e9ecef;
   display: inline-block;
   padding-left: 15px;
   width: 120px;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
}

.selected-file {
   padding-left: 15px;
}

}
}

.form-floating > .text-area {
   height: auto;
   border-top: 20px solid transparent;
   border-bottom: 15px solid transparent;
   border-right: 10px solid transparent;
   border-left: 0px solid transparent;
   outline: 1px solid #717E96;
}

.readonly-control {
   border: none;
   background-color: rgb(233, 236, 239, 0.6); /* #e9ecef80 */
   height: fit-content !important;
   min-height: 45px;
   opacity: 1;
   word-break: break-word;
   text-overflow: ellipsis;
}

.inline-preview {
   margin-top: -15px;
}

.form-multi-col-section {
   display: inline-grid;
   gap: 10px 25px;
}

.form-multi-col-section-break {
   grid-column: 1 / -1;
}

.form-check {
   min-height: auto !important;
   margin-bottom: .25rem;
   display: flex;
}

.form-check-radio-group {
   display: inline-grid;
   gap: 10px 25px;
}

.form-check-input:checked {
   background-color: var(--primary);
}

.form-check-input:focus {
   box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, white);
}

.form-check-input[type=checkbox] {
   width: 21px;
   height: 21px;
   margin-top: 0px;
}

.form-check-label {
   padding-left: 10px;
   overflow: hidden;
   width: 100%;
   display: inline-block;
   word-break: break-word;
}

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=password]:focus,
select:focus,
textarea:focus,
.btn:focus {
   border: 2px solid var(--primary);
   outline: 0;
   -webkit-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, white);
   box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, white);
}

.dropdown-menu {
   cursor: pointer;
}

button {
   background: var(--primary) 0% 0% no-repeat padding-box;
   border: 1px solid var(--primary);
   opacity: 1;
   height: 35px;
   font-size: 15px;
   line-height: 15px;
   color: #FFFFFF;
   padding-left: 18px;
   padding-right: 18px;
}

   button:hover,
   button:focus,
   button:active {
      color: color-mix(in srgb, var(--primary) 50%, white);
      box-shadow: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
   }

/** floating label **/
.form-floating > .form-control {
   padding: 1rem 0.75rem;
   color: var(--text);
}

   .form-floating > .form-control:focus {
      -webkit-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, white);
      box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, white);
   }

   .form-floating > .form-control:focus,
   .form-floating > .form-control:not(:placeholder-shown) {
      padding-left: 15px;
      padding-top: 20px;
      padding-bottom: 4px;
   }

.form-floating > label {
   color: #78859B;
   padding-left: 16px;
   font-size: 14.5px;
   line-height: 15px;
}

   .form-floating > label.radzen-datepicker {
      top: -3px;
   }

      .form-floating > label.radzen-datepicker:not(:placeholder-shown) {
         top: 0;
      }

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown):focus ~ label .form-floating > .form-select ~ label {
   color: var(--primary) !important;
   opacity: 1;
   font-size: 13px;
   line-height: 9px;
}

.form-floating > .form-control:not(:placeholder-shown) ~ label {
   color: #78859B;
   font-size: 15px;
   line-height: 9px;
}

/** end of floating label **/

/* control widths */
.form-col-text-small {
   width: 189px;
}

.form-col-text {
   width: 397px;
}

.form-col-text-large {
   width: 600px;
}

.form-col-check-radio-small {
   width: 100px;
}

.form-col-check-radio-medium {
   width: 189px;
}

.form-col-check-radio-large {
   width: 397px;
}

.form-col-check-radio-extra-large {
   width: 100%;
}

.form-multi-select {
   width: 100%;
}

.sub-collection {
   padding-left: 25px;
}

.max-width {
   .form-col-text {
      width: 100%;
   }
   .form-col-check-radio {
      width: 100%;
   }
}

.form-group-inline {
   display: inline-flex;
}

.form-col-numeric {
   width: 250px;
}

.form-col-numeric-display-text {
   line-height: 45px;
   padding-left: 20px;
}

.form-col-date {
   width: 282px;
}

.form-col-auto {
   width: auto;
}

.form-col-between-label {
   padding-top: 10px;
   text-align: center;
}

.grid-table {
   .form-col-numeric, .form-col-text

{
   width: -webkit-fill-available;
}

.form-check {
   padding-top: 10px;
}

}

.multi-select-container {
   max-height: 200px;
   overflow-y: auto;
}

.inline {
   display: inline-flex;
   line-height: 65px;
}

/** auto complete **/

.autocomplete-options, .multi-select-options {
   position: absolute;
   border: 1px solid #ccc;
   border-top: none;
   border-radius: 0 0 5px 5px;
   overflow-y: auto;
   background-color: #FFFFFF;
   border: 1px solid #ccc;
   border-radius: 5px;
   box-shadow: 0px 5px 7px 5px rgba(0, 0, 0, 0.15);
   z-index: 1;
   width: -webkit-fill-available; /* for chrome, safari*/
   width: -moz-available; /* for firefox*/
   width: 100%; /* fallback */
}

.multi-select-options {
   max-height: 250px;
   overflow-y: auto;
}

.open-above {
   bottom: 100%;
   margin-bottom: 1px;
}

.multi-select-options div {
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 30px;
   cursor: pointer;
}

.multi-select-options .form-check {
   margin-bottom: 0px;
}

.autocomplete-options div {
   padding: 10px;
   cursor: pointer;
}

.autocomplete-options div:hover,
.multi-select-options div:hover {
   background-color: #ddd;
}

.autocomplete-options .no-result {
opacity: 0.4;
cursor: default;
}

.input-with-clear {
   position: relative;
   padding-right: 35px !important;
   text-overflow: ellipsis;
}

.grid-cell-hasChanges {
   background-color: #FFDCDC;
}
.ody-search-button-collection {
   position: absolute;
   top: 30px;
   right: 0px;
}

.clear-button {
   position: absolute;
   top: 30px;
   right: 0px;
   transform: translateY(-50%);
   border: none;
   cursor: pointer;
   background-color: transparent;
   color: #000000;
   font-size: 15px;
}

.add-button {
   margin-top: -5px;
   transform: translateY(-50%);
   border: none;
   cursor: pointer;
   background-color: transparent;
   color: #000000;
   font-size: 15px;
}

.search-button {
   transform: translateY(-50%);
   border: none;
   cursor: pointer;
   background-color: transparent;
   color: #000000;
   font-size: 15px;
}
   
.clear-button-chevron {
   position: absolute;
   top: -7.5px;
   right: 4.5px;
   transform: translateY(-50%);
   border: none;
   cursor: pointer;
   background-color: transparent;
   color: #000000;
   font-size: 12px;
   padding-right: 10px;
}

   .clear-button:hover,
   .clear-button-chevron:hover,
   button:focus,
   button:active {
      box-shadow: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
   }

/** end of auto complete **/
/** radio button **/
@supports(-webkit-appearance: none) or (-moz-appearance: none) {
   input [type='checkbox'] {
      --active: #275EFE;
      --active-inner: #fff;
      --focus: 2px rgba(39, 94, 254, .3);
      --border: #BBC1E1;
      --border-hover: #275EFE;
      --background: #fff;
      --disabled: #F6F8FF;
      --disabled-inner: #E1E6F9;
      -webkit-appearance: none;
      -moz-appearance: none;
      --border-hover: #275EFE;
      cursor: pointer;
      border: 1px solid var(--bc, var(--border));
      &:hover

{
   &:not(:checked)

{
   &:not(:disabled)

{
   --bc: var(--border-hover);
}

}
}
}

input[type='radio'] {
   --active: #275EFE;
   --active-inner: #fff;
   --focus: 2px rgba(39, 94, 254, .3);
   --border: #BBC1E1;
   --border-hover: #275EFE;
   --background: #fff;
   --disabled: #F6F8FF;
   --disabled-inner: #E1E6F9;
   -webkit-appearance: none;
   -moz-appearance: none;
   height: 21px;
   outline: none;
   display: inline-block;
   vertical-align: top;
   position: relative;
   margin: 0;
   cursor: pointer;
   border: 1px solid var(--bc, var(--border));
   background: var(--b, var(--background));
   transition: background .3s, border-color .3s, box-shadow .2s;
   &:after

{
   content: '';
   display: block;
   left: 0;
   top: 0;
   position: absolute;
   transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);
}

&:checked {
   --b: var(--primary);
   --bc: var(--primary);
   --d-o: .3s;
   --d-t: .6s;
   --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}

&:disabled {
   --b: var(--disabled);
   cursor: not-allowed;
   opacity: .9;
   &:checked

{
   --b: color-mix(in srgb, var(--primary) 25%, white);
   --bc: var(--border);
}

& + label {
   cursor: not-allowed;
}

}

&:hover {
   &:not(:checked)

{
   &:not(:disabled)

{
   --bc: var(--border-hover);
}

}
}

&:focus {
   box-shadow: 0 0 0 var(--focus);
}

&:not(.switch) {
   width: 21px;
   &:after

{
   opacity: var(--o, 0);
}

&:checked {
   --o: 1;
}

}

& + label {
   font-size: 14px;
   line-height: 21px;
   display: inline-block;
   vertical-align: top;
   cursor: pointer;
   margin-left: 4px;
}

}

input[type='radio'] {
   border-radius: 50%;
   &:after

{
   width: 19px;
   height: 19px;
   border-radius: 50%;
   background: var(--active-inner);
   opacity: 0;
   transform: scale(var(--s, .7));
}

&:checked {
   --s: .4;
}

}
}

/** end of radio button **/

/** nav tabs **/
.nav-tabs {
   border-top: 1px solid #dee2e6 !important;
}

   .nav-tabs .nav-link {
      font-weight: 500;
      color: inherit;
      border: none;
   }

      .nav-tabs .nav-link.active {
         background-color: color-mix(in srgb, var(--primary) 10%, white);
         border: none;
      }

         .nav-tabs .nav-link:hover,
         .nav-tabs .nav-link.active:active,
         .nav-tabs .nav-link.active:focus {
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
         }

/** end of nav tabs **/

/** toolbar **/
/*.progress-bar {
   border-radius: 11px;
   height: 35px;
   width: 100%;
   background-color: #77C26F;
   transition: opacity 0.3s ease-in-out;
}

.progress-fill {
   height: 100%;
   background-color: #2D9928;
   transition: width 0.3s ease-in-out;
   color: #ffffff;
}*/


.loading-bar {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   background-color: #77C26F; /* Semi-transparent background */
   padding: 10px;
   border-radius: 11px;
   width: auto;
   max-width: fit-content;
   max-width: -moz-fit-content;
   height: 35px;
}

   .loading-bar:hover, .loading-bar:active, .loading-bar:focus {
      background-color: #77C26F; /* Semi-transparent background */
   }

      .loading-bar:hover:active {
         outline: 0;
      }

.text {
   z-index: 100;
   align-items: center;
}

.icon {
   color: #ccc; /* Adjust color as needed */
   margin-right: 5px;
}

.message {
   color: #fff; /* Adjust color as needed */
}

.progress {
   position: absolute;
   margin-left: -10px;
   height: inherit;
   border-radius: 11px;
   background-color: #2D9928; /* Adjust background color as needed */
}

.progress-fill {
   background-color: #4CAF50; /* Progress bar color */
   transition: width 0.3s ease-in-out;
}

.cancelIcon {
   color: #fff; /* Adjust color as needed */
   align-items: right;
}

/** end of toolbar **/

/** grid system from 3CS style guide **/
input.form-control,
select.form-control {
   width: 100%;
   height: 45px;
}

textarea.form-control {
   height: auto;
}

/** end of grid system from 3CS style guide **/


/** table **/
.table-panel,
.quickgrid {
   overflow-x: auto;
   display: block;
   padding-top: 10px;
   & tbody, & td, & tfoot, & th, & thead, & tr

{
   border-style: none;
}

& td.col-justify-center {
   text-align: center;
}

& td.col-justify-right {
   text-align: right;
}

& td.col-justify-end {
   text-align: right;
}

& .col-word-break {
   word-break: break-word;
}

& thead {
   & tr

{
   /*height: 50px;*/
   & th

{
   padding-left: 5px;
   padding-right: 5px;
   color: var(--text);
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 500;
   vertical-align: middle;
   &.th-right-align

{
   text-align: right;
}
   &:first-child

{
   padding-left: 15px;
}
&:last-child {
   padding-right: 15px;
}

&.th-last {
   padding-right: 15px;
}

&.th-100 {
   width: 100px;
}

&.th-125 {
   width: 125px;
}

&.th-150 {
   width: 150px;
}

&.th-175 {
   width: 175px;
}

&.th-200 {
   width: 200px;
}

&.th-250 {
   width: 250px;
}

&.th-300 {
   width: 300px;
}

&.th-400 {
   width: 400px;
}

&.th-500 {
   width: 500px;
}

& div.col-header-content {
   & input[type=checkbox]

{
   transform-origin: center;
   vertical-align: middle;
}

}

&.filter-box {
   & div.col-header-content

{
   position: relative;
   display: flex;
   align-items: center;
   & button.col-options-button

{
   border: none;
   padding: 0;
   width: 1rem;
   align-self: stretch;
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.5 0.5 21 24" stroke="currentColor" stroke-width="2"><path d="M4 5h16M4 11h16M4 17h16" /></svg>') center center / 1rem no-repeat;
}

}

&.active-filter div.col-header-content {
   & button.col-options-button

{
   background-color: lightgrey;
}

}

& div.col-options {
   position: absolute;
   box-shadow: 0 3px 8px 1px #aaa;
   border-color: #ddd;
   border-radius: 5px;
   padding: 10px;
   z-index: 1;
   background: #ffffff;
   & div

{
   & input[type=search]

{
   padding: 5px;
   border: 1px solid rgb(209 213 219);
   border-radius: 5px;
}
   & input[type=checkbox] {
   appearance: checkbox !important;
   -webkit-appearance: checkbox !important;
   -moz-appearance: checkbox !important;
}

}
}
}
}
}
}

& tbody {
   & tr

{
   /*height: 50px;*/
   background-color: #FFFFFF;
   & td

{
   padding-left: 5px;
   padding-right: 5px;
   color: var(--text);
   font-size: 14.5px;
   font-weight: 400;
   vertical-align: middle;
   overflow: hidden;
   & a

{
   cursor: pointer;
}

/*& div.form-group {
   margin-top: 10px;
}

& div.inline {
   display: inline-flex;
   line-height: 65px;
}*/

& button {
   width: auto;
   height: auto;
   text-align: justify;
}

&.ellipsis {
   &:hover

{
   & span

{
   background-color: #FFFFFF;
}

}
}

& input[type=checkbox] {
   transform-origin: center;
   vertical-align: middle;
   -webkit-transform-origin-x: 0;
}

&:first-child {
   padding-left: 15px;
}

&:last-child {
   padding-right: 15px;
}

&.td-100 {
   max-width: 100px;
}

&.td-200 {
   max-width: 200px;
}

&.td-300 {
   max-width: 300px;
}

&.td-400 {
   max-width: 400px;
}

&.td-500 {
   max-width: 500px;
}

& button.link-btn {
   padding: 0px;
   font-size: inherit;
}

& button.link-btn.doc {
   text-align: unset;
   padding-right: 10px;
}

& div.read-only {
   font-size: 16px;
   line-height: 26px;
}

& button.text-align-left {
   text-align: left !important;
}

& button.text-align-right {
   text-align: right !important;
}

& button.text-align-center {
   text-align: center !important;
}

& button:hover {
   box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
}

&.cell-entry {
   & .form-group

{
   margin-top: 5px;
   margin-bottom: 5px;
   & .form-check

{
   margin: auto;
   width: fit-content;
   width: -moz-fit-content
}

}
}
}
}

& tr:nth-child(odd) {
   background-color: color-mix(in srgb, var(--primary) 10%, white);
   & .ellipsis

{
   &:hover

{
   & span

{
   background-color: color-mix(in srgb, var(--primary) 10%, white);
}

}
}

& td:first-child {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
}

& td:last-child,
& td.last-child {
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}

}
}

.product-mandatory-fields {
   & tr

{
   & td

{
   &:first-child

{
   font-weight: 500;
   color: #000000;
}

}
}
}

&.th-right-align {
   text-align: right;
}
}

.quickgrid.clientgroup {
   .col-title-text {
      font-size: 1.25em;
      font-weight: 700;
   }
}

/* Force checkbox to have sharp edges */
input[type="checkbox"] {
   border-radius: 0 !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   appearance: none !important;
}

.form-break {
   height: 1px; 
   margin: 0 auto; 
   background-color: #DFE0E2; 
   border: none; 
   box-shadow: inset 0 0 0 1px #979797;
}

/** grid paging **/
.paginator[b-3qssc0bm46] {
   display: flex;
   border-top: 1px solid #ccc;
   margin-top: 0.5rem;
   padding: 0.25rem 0;
   align-items: center;
}

.pagination-text[b-3qssc0bm46] {
   margin: 0 0.5rem;
}

nav[b-3qssc0bm46] {
   display: flex;
   margin-left: auto;
   gap: 0.5rem;
   align-items: center;
}

nav button[b-3qssc0bm46] {
   border: 0;
   background: none center center / 1rem no-repeat;
   width: 2rem;
   height: 2rem;
}

nav button[disabled][b-3qssc0bm46] {
   opacity: 0.4;
}

nav button:not([disabled]):hover[b-3qssc0bm46] {
   background-color: #eee;
}

nav button:not([disabled]):active[b-3qssc0bm46] {
   background-color: #aaa;
}

.go-first[b-3qssc0bm46],
.go-last[b-3qssc0bm46] {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90) scale(0.8)" transform-origin="12 12"><path d="m 2,1.5 l 10,17.5 l 10,-17.5 l -10,7.75 l -10,-7.75 z"/><rect height="2" width="20" y="20.5" x="2"/></g></svg>');
}

.go-previous[b-3qssc0bm46],
.go-next[b-3qssc0bm46] {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90)" transform-origin="12 12"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 11 z" /></g></svg>');
}

.go-next[b-3qssc0bm46],
.go-last[b-3qssc0bm46] {
   transform: scaleX(-1);
}
   /** end of grid paging **/
   /** end of table **/

.dynamic-width-container {
   display: inline-block;
   width: auto;
   min-width: 100px;
   max-width: 100%; 
   word-wrap: break-word;
   padding-top: 14px;
}
   .dynamic-width-container .form-col-text {
      width: auto;
   }
.htmlcontent-control {
   padding-top:6px;
}

/* Flex Container Styling */
.flex-container {
   display: flex;
   flex-wrap: wrap;
   margin-left: -10px; /* Space between items */
   margin-right: -10px; /* Space between items */
}

/* Flex Item Styling */
.flex-item {
   box-sizing: border-box; /* Ensure padding and borders are included in width */
   padding: 3px 10px;
}

.flex-break {
   flex-basis: 100%;
   height: 0; /* No visible height */
   margin: 0;
   padding: 0;
}

.flex-spacer {
   height: 45px;
}

.text-align-left {
   text-align: left;
}

.text-align-center {
   text-align: center;
}

.text-align-right {
   text-align: right;
}

.text-align-justify {
   text-align: justify;
}

.text-weight-bold {
   font-weight: 500;
   font-size: 14px;
}

.text-uppercase {
   text-transform: uppercase;
}

.form-check-center {
   display: flex;
   justify-content: center;
   align-items: center;
   padding-top: 10px;
}

.form-section-table > .form-section:nth-child(odd) {
   background-color: color-mix(in srgb, var(--primary) 10%, white);
   border-radius: 8px;
}

/* Remove dialog content width limitation */
.rz-ody-dialog {
   max-width: none;
   margin: 0.75rem;
}

/* Overlay Background */
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
   max-width: none;
   margin: 0.75rem;
}

/* Popup Container */
.popup {
   background-color: #fff;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   width: 400px;
   max-width: 100%;
   text-align: center;
}

.form-buttons {
   display: flex;
   justify-content: space-between;
   margin-top: 15px;
}

.custom-dialog-header {
   display: flex;
   justify-content: space-between; /* Space between title and button */
   align-items: center;
   padding: 10px;
   background-color: #f5f5f5;
   border-bottom: 1px solid #ddd;
   font-size: 1.2rem;
   font-weight: bold;
}

.custom-dialog-close {
   background: none;
   border: none;
   color: #ff0000; /* Icon color */
   font-size: 1.5rem; /* Icon size */
   cursor: pointer;
   padding: 5px;
}

   .custom-dialog-close:hover {
      color: #cc0000;
      background-color: rgba(255, 0, 0, 0.1); /* Optional hover effect */
      border-radius: 50%;
   }

.radzen-template-listbox {
   width: 100%;
   height: 500px;
   --rz-dropdown-item-padding: 0 1rem;
}

.rz-dropdown-items li:hover {
   background-color: transparent;
}

.rz-dropdown-item:hover {
   background-color: transparent;
}