a.btn-link {
    -webkit-appearance: none;
}

.profile-center-div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 auto !important;
    max-width: 500px;
}

.message-center-div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 auto !important;
    max-width: 900px;
}

.responder-management-center-div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 auto !important;
    max-width: 500px;
}

.k-form-field:has(> .k-textbox #desc) {

    display: none;
}

.center-button.k-form .k-form-buttons {
    justify-content: center;
}

.form-button {
    width: 25%;
}

.form-button-fitcontent {
    width: fit-content;
}


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

.k-breadcrumb {
    background-color: transparent !important;
}

.k-breadcrumb li {
    font-size: 0.8em !important;
}

.k-breadcrumb-root-link,
.k-breadcrumb-link {
    color: black !important;
    text-decoration: none !important;
}

.k-breadcrumb-last-item .k-breadcrumb-link {
    color: #6c757d !important;
}

.c-dark-theme .k-breadcrumb-root-link,
.c-dark-theme .k-breadcrumb-link {
    color: #ccc !important;
    text-decoration: none !important;
}

.k-grid th:first-child {
    text-align: center !important;
}

.center-second-column th:nth-child(2),
.center-second-column td:nth-child(2) {
    text-align: center !important;
}

.left-second-column th:nth-child(2),
.left-second-column td:nth-child(2) {
    text-align: left !important;
}

.left-first-column th:first-child,
.left-first-column td:first-child {
    text-align: left !important;
}

.k-grid th input.k-checkbox {
    margin-top: 4px;
    /*margin-left: 15px;*/
}

.error-button {
    padding: 0px 5px 5px 5px !important;
}

.accordion {
    width: 100%;
}

.header-nav {
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    list-style: none;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

ul {
    margin-top: 0;
}

html:not([dir=rtl]) .me-4 {
    margin-right: 1.5rem !important
}

html:not([dir=rtl]) .header-nav {
    padding-left: 0;
}

.nav-link {
    display: block;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.avatar-md {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
}

.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 50em;
    transition: margin 0.15s;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    color: rgba(0, 0, 21, 0.5);
}

.c-dark-theme .avatar-img {
    color: rgba(255, 255, 255, 0.75);
}

img {
    vertical-align: middle;
}

.dropdown-submenu {
    position: relative;
    display: inline-block;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    right: 100%;
    margin-top: -6px;
}

.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(90deg);
}

.dropdown-submenu:hover .dropdown-menu {
    display: block;
}

.c-dark-theme .form-label {
    color: #fff;
}

.c-dark-theme .accordion-item {
    background-color: #2a2b36 !important;
}

.c-dark-theme .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.c-dark-theme .accordion-header button {
    color: rgba(255, 255, 255, 0.87) !important;
    background-color: #24252f !important;
}

.c-dark-theme .accordion-header button:active {
    background-color: #3c4b64 !important;
    color: #e6e6e6 !important;
}

.c-dark-theme .accordion-header button:focus {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-primary {
    color: #fff !important;
    background-color: #321fdb !important;
    border-color: #321fdb !important;
}

.hidden {
    display: none;
}

.k-dropdownlist > button.k-input-button {
    padding: 0.1rem;
}

.window-width {
    max-height: 90%;
}

@media only screen and (min-width: 1300px) {
    .window-width {
        width: 60%;
    }
}

@media only screen and (min-width: 850px) and (max-width: 1300px) {
    .window-width {
        width: 70%;
    }
}

@media only screen and (min-width: 300px) and (max-width: 850px) {
    .window-width {
        width: 80%;
    }
}

@media only screen and (min-width: 1300px) {
    .qualifications-window-width {
        width: 60%;
    }
}

@media only screen and (min-width: 850px) and (max-width: 1300px) {
    .qualifications-window-width {
        width: 60%;
    }
}

@media only screen and (min-width: 300px) and (max-width: 850px) {
    .qualifications-window-width {
        width: 80%;
    }
}

.dropdown-padding {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

/* Ensure the outer containers are transparent and have no padding/margin */
.custom-combobox-popup .k-animation-container,
.custom-combobox-popup .k-child-animation-container,
.custom-combobox-popup .k-list-container.k-combobox-popup {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure the list items cover the full width with background color */
.custom-combobox-popup .k-list-item {
    padding: 0 !important;
    margin: 0 !important;
    background-color: inherit !important;
    box-sizing: border-box;
    width: 100%;
}

/* Style the inner div to cover full width and height */
.custom-combobox-popup .k-list-item div {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: inherit !important;
    color: black;
}

/* Inner span for padding around text, without affecting the full background */
.custom-combobox-popup .k-list-item div span {
    display: block;
    padding: 8px; /* Adjust padding as needed for text */
    color: black;
    font: inherit;
    box-sizing: border-box;
}

/* Apply the background color to the selected item displayed in the input field */
.dropdown-padding .k-input,
.dropdown-padding .k-combobox .k-select {
    background-color: inherit !important;
    color: black !important;
    padding: 8px !important;
    box-sizing: border-box;
}

/* Override the background color for the selected item (when the item is displayed in the input) */
.dropdown-padding .k-selected-value {
    background-color: inherit !important;
    color: black !important;
    padding: 8px !important;
    box-sizing: border-box;
}



.dropdown-padding input.k-input-inner {
    padding: 0.375rem 0rem 0.375rem 0.375rem;
}
.dropdown-padding .telerik-combobox-popup {
    margin-left: -300px;
}

.row > .col-md-4 {
    padding-right: 10px;
}

.row > .col-md-8 {
    padding-left: 10px;
}

.row > .col-md-8 > .col-md-12{
    padding-left: 0px;
}

.permissions-accordion-body {
    padding: 0 !important;
}

.permissions-list-group {
    border-radius: 0 !important;
}

.k-floating-label-container:focus-within > .k-label {
    font-size: 0.8em !important;
    top: 4px !important;
}

.k-floating-label-container > .k-label {
    font-size: 0.8em;
    top: 4px;
}

.k-floating-label-container.k-state-empty > .k-label {
    font-size: 1em;
}

.k-chip-solid-base {
    border-color: #edeeee;
}

.k-toolbar {
    overflow: visible !important;
}

.center-save-button {
    left: 50%;
    margin-left: -12.5%;
}

.button-dropdown::after {
    opacity: 1;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.Required label:after {
    content: " *";
    color: red;
}

.dropdown-name {
    font-size: 1rem !important;
}

.floating-label-width {
    width: 100% !important;
}

.document-div {
    margin-bottom: 10px;
    padding: 4px;
}

.file-icon {
    padding: 4px;
    cursor: pointer;
}

.add-file-div {
    cursor: pointer;
}

.document-name {
    margin-bottom: 0;
}

.custom-border {
    border: 1px solid #ccc !important;
}
.combobox-margin {
    margin-top: 15px;
    width: 100%;
}

.comment-save {
    margin-top: 19px;
    width: 100px;
    left: 50%;
    margin-left: -50px;
}

.center-card {
    width: 600px !important;
    left: 50% !important;
    margin-left: -300px !important;
}

.document-link {
    text-decoration: none !important;
    color: #3c4b64;
}

.document-link:hover{
    text-decoration: none;
    color: #3c4b64;
}

.two-button-flex-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}

.two-form-buttons {
    width: 20%;
    margin-left: 5px;
    margin-right: 5px;
}


.status-select {
    max-width: 150px !important;
    background-color: #e4e7eb !important;
    border-color: #e4e7eb !important;
}

.status-select > option {
    background-color: white;
    color: #343942;
}

#floating-panel {
    z-index: 5;
    padding-top: 5px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 30px;
}

#floating-panel > input {
    border-color: #e4e7eb;
    background-color: #e4e7eb;
    color: #212529;
    font-size: 1rem;
    line-height: 1.5;
    border-width: 1px;
    border-style: solid;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
}

.map-div {
    width: 100%;
    padding-left: 15px;
    padding-right: 4px;
}

.row-green, .row-green:hover {
    background-color: #97EC7D !important;
}

.row-red, .row-red:hover {
    background-color: #FF776B !important;
}

div.k-grid tr.remove-alternating-bg {
    background-color: #fff;
}

div.k-grid td.remove-dividers {
    border: none;
}

.k-grid {
    /*max-height: 900px !important;*/
}

/*.k-toolbar.k-grid-toolbar {
    position: sticky;
    top: 56px;
}

.k-grid-header {
    position: sticky;
    top: 111px;
}*/

.AuthenticationStyle-container {
    background: #000f50;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    box-sizing: border-box;
}

.AuthenticationStyle-logo {
    max-width: 400px;
    max-height: 400px;
}
.AuthenticationStyle-logo-large {
    max-width: 600px;
    max-height: 600px;
}
.AuthenticationStyle-message {
    font-size: 2rem;
    font-weight: bold;
    margin: 20px 0;
}
.AuthenticationStyle-retryButton {
    background-color: #fff;
    color: #000;
    border: none;
    font-size: 1.2rem;
    border-radius: 5px;
    cursor: pointer;
}
.AuthenticationStyle-retryButton:hover {
    background-color: #ddd;
}
.AuthenticationStyle-icon {
    margin-top: 15px;
}

.message-floating-label {
    width: 100%;
}

.div-padding {
    padding: 5px 0px 5px 0px;
}

.track-button {
    margin-left: 5px;
}

fieldset.k-form-fieldset legend {
    display: none;
}

.k-form .k-form-fieldset {
    margin: 0 !important;
}

.form-initial-height textarea {
    height: 36px;
}

.button-margin-top {
    margin-top: 10px;
}

i.fas {
    padding: 0 5px 0 0;
}

i.far {
    padding: 0 5px 0 0;
}

i.k-icon {
    padding: 0 5px 0 0;
}

/*Fix for detail plus icon*/
.k-grid .k-hierarchy-cell > .k-icon,
.k-grid .k-drag-cell > .k-icon {
    width: 50% !important;
}


/*dialog container temp fix*/

.k-window-actions {

    margin: 0em 0;

    border-width: 1px 0 0 0;

    margin-inline-end: 0rem;

    line-height: 1;

    display: flex;

    gap: 0.5rem;

    flex-flow: row nowrap;

    flex-shrink: 0;

    align-items: center;

    vertical-align: top;

}

.k-window-content {

    background-color: white;

}

/*.k-window-titlebar {*/

/*    background-color: white;*/

/*}*/

.auth-button {
    background-color: #3c4b64 !important;
    margin-right: 15px;
}

.floating-label-text {
    color: black; !important;
}
/* */

.custom-tab-strip-spacing {
    padding-left: 8px;
}

.k-tabstrip-content, .k-tabstrip > .k-content {
     margin: 0 !important; 
     padding: 0rem 0rem !important; 
     box-sizing: border-box; 
     border-width: 1px; 
     border-style: solid; 
     border-color: inherit; 
     display: none; 
     overflow: unset; 
     flex: 1 1 auto; 
     position: relative; 
}

/*Debtors search box */
.floating-label-container {
    display: flex;
    flex-direction: column;
    gap: 5px !important;
    width: 100%;
    max-width: 270px;
}


.dynamic-textbox {
    width: 100%;
    max-width: 100%; 
}

.k-pager-md .k-pager-info, .k-pager-sm .k-pager-info, .k-pager-sm .k-pager-sizes, .k-pager-sm .k-pager-numbers {
    display: flex;
}

.custom-debtor-button {
    max-width: 150px;
}

.custom-textfield-width-200 {
    max-width: 200px;
}
.custom-textfield-width-250 {
    max-width: 250px;
}
.custom-textfield-width-300 {
    max-width: 300px;
}
/* */

/*Pager Info*/
.k-grid-pager {
    display: inherit;
    padding: 5px;
}
.k-pager-wrap {
    padding: 0.5rem 0.5rem;
}

/*Pager Info*/

/*Login Page CSS*/
.redirect-message {
    text-align: center; /* Center the text */
    position: fixed; /* Use absolute positioning to center in the viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Adjusts the position to truly center since top/left is from top-left corner */
    width: 100%; /* Ensures the container spans the width, for text centering */
}

.redirect-message .logo {
    width: 100px; /* Adjust based on your logo's size */
    margin-bottom: 20px; /* Space between logo and message */
    display: block; /* Ensures logo is centered in its div */
    margin-left: auto;
    margin-right: auto;
}

/*Login Page CSS*/

/*ToolbarCheckboxFix */
.k-checkbox-wrap {
    align-self: unset;
}
/*end*/

window-loader{
    height: 180px;
    width: 180px;
}

#gridContainer {
    position: relative;
    height: 100%;
}

/* Adjusted state when sidebar is expanded */
.AdjustSideBarFilter {
  left: 98px !important;
}

/*::selection {*/
/*    background: #212129;*/
/*}*/

.search-wrapper.active {
    width: 100%;
}

.search-wrapper .input-holder {
    height: 70px;
    width:70px;
    overflow: hidden;
    background: rgba(255,255,255,0);
    border-radius:6px;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
    width:100%;
    border-radius: 50px;
    /*background: rgba(0,0,0,0.5);*/
    background: #3c4b64;
    /*transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);*/
}
.search-wrapper .input-holder .search-input::placeholder {
    color: #FFF; /* Set the color of the placeholder text */
}

.search-wrapper .input-holder .search-input {
    width:100%;
    height: 50px;
    padding:0px 70px 0 20px;
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    background: #3c4b64;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family:"Open Sans", Arial, Verdana;
    font-size: 24px;
    font-weight: 400;
    line-height: 20px;
    color:#FFF;
    transform: translate(0, 60px);
    /*transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);*/
    /*transition-delay: 0.5s;*/
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
    width:70px;
    height:70px;
    border:none;
    border-radius:6px;
    background: #FFF;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
    width: 50px;
    height:50px;
    margin: 10px;
    border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
    width:22px;
    height:22px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    transform: rotate(45deg);
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
    transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
    position: absolute;
    content:'';
}
.search-wrapper .input-holder .search-icon span::before {
    width: 5px;
    height: 18px;
    left: 9px;
    top: 13px;
    border-radius: 2px;
    background: #3c4b64;
}
.search-wrapper .input-holder .search-icon span::after {
    width: 25px;
    height: 25px;
    left: 0px;
    top: -8px;
    border-radius: 16px;
    border: 4px solid #3c4b64;
}
.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:24px;
    right:20px;
    width:25px;
    height:25px;
    cursor: pointer;
    transform: rotate(-180deg);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    transition-delay: 0.2s;
}
/*.search-wrapper.active .close {*/
/*    right: -50px;*/
/*    transform: rotate(45deg);*/
/*    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);*/
/*    transition-delay: 0.5s;*/
/*}*/
.search-wrapper .close::before, .search-wrapper .close::after {
    position: absolute;
    content:'';
    background: #3c4b64;
    border-radius: 2px;
}
.search-wrapper .close::before {
    width: 5px;
    height: 25px;
    left: 10px;
    top: 0px;
}
.search-wrapper .close::after {
    width: 25px;
    height: 5px;
    left: 0px;
    top: 10px;
}


.container {
    display: flex;
    flex-direction: column;  /* Adjust if necessary for your layout */
    width: 100%;  /* Make sure the container takes full width */
}

.search-wrapper {
    position: relative;  /* Change from absolute to prevent layout disruption */
    width: 100%;  /* Ensure it spans full width at the top of the container */
    z-index: 2;  /* Keep on top if needed */
}


.main-content {
    margin-top: 20px;  /* Ensure no excessive margin */
    padding: 0;  /* Remove padding if it's not necessary */
    display: flex;
    flex: 1;  /* Allows this element to grow and fill available space */
    flex-direction: row;  /* Adjust based on your layout needs */
    width: 100%;  /* Ensure it attempts to fill the container */
}

.sidebar {
    position: relative; /* Crucial for bounding absolutely positioned children */
    flex: 1;
    max-width: 250px; /* Adjust based on design needs */
    overflow: hidden; /* Prevents any child from overflowing */
}

.sidebar, .results {
    flex: 1;  /* Adjust flex-grow to control space usage */
}


.results {
    position: relative; /* Ensure relative positioning for bounding the loader */
    display: flex;
    flex-direction: row; /* Aligns children side by side */
    flex: 1; /* Takes up all available space in the container */
    gap: 10px; /* Space between the two sections */
    padding-left: 15px; /* Padding for the outer container */
    overflow: hidden; /* Ensures that the outer container does not scroll */
    max-height: 80vh; /* Limits the height of the results section */
}

.debtor-results, .debtor-contact-results {
    flex: 1; /* Each section takes up equal space */
    overflow-y: auto; /* Makes each section independently scrollable */
    background-color: #3c4b64; /* background color */
    border-radius: 10px; /* Rounded corners for aesthetics */
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.debtor-result, .debtor-contact-result {
    background-color: white;
    border-radius: 5px;
    margin-bottom: 10px; /* Space between individual results */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    min-height: 100px; /* Minimum height for consistency */
}


@media (max-width: 768px) {
    .main-content {
        flex-direction: column; /* Stack sidebar and results vertically */
    }

    .sidebar, .results {
        width: 100%; /* Full width for better usability on small screens */
    }

    .debtor-contact-results {
        margin-top: 15px;
    }
    .results {
        margin-top: 10px;
        margin-left: -15px;
        display: block; /* Stack the debtor sections vertically */
        
    }
}

/* Clickable link styling for phone, email, and web addresses */
.clickable-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.clickable-link:hover {
    color: #0066cc;
    text-decoration: underline;
}

.big-box {
    background-color: #3c4b64;
    padding: 10px;
    border-radius: 10px;
}

.round-box {
    border-radius: 5px;
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
}

body.c-dark-theme .round-box {
    color: black; 
}

.small-box {
    border: 1px #3c4b64 ;
    padding: 10px;
    margin-bottom: 10px;
}

.blocked-header {
    background-color: lightcoral !important;
    color: white;
    font-weight: bold;
    padding: 5px;
    font-size: large;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 10px;
}


.debtor, .debtor-result {
    cursor: pointer;
}

body.c-dark-theme .debtor-result {
    color: black; 
}
body.c-dark-theme .debtor-contact-result {
    color: black;
}

/* Font size adjustments for headers and content */
.debtor-results h2, .debtor-contact-results h2 {
    font-size: 16px;
    margin-bottom: 10px;
}

.debtor-result h3, .debtor-contact-result h3,
.debtor-result p, .debtor-contact-result p {
    font-size: 14.5px;
    margin: 2px 0; 
    font-weight: 600;
}

.Customer-loader {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%; /* Ensures it covers the sidebar */
    height: 100%; /* Adjust height or set to 'auto' based on needs */
    z-index: 1000; /* To ensure it overlays other content as needed */
}

.search-highlight {
    background-color: yellow;
    border-radius: 6px;
}

.filter-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    color: black;
    border-radius: 5px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1000; 
}

/*//Notes*/

.custom-editor-tool-button {
    font-size: 1rem;
    width: 90px;
}
.note-page-container {
    display: flex;
    position: relative;
    width: 100%;
}

.note-page-container .k-loader-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.note-page-treeview, .note-page-editor, .note-page-file-upload {
    padding: 10px;
    box-sizing: border-box;
}

.note-page-treeview {
    width: 100%;
}

.note-page-editor {
    width: 100%;
}

.note-page-file-upload {
    width: 100%;
}

.note-page-refresh-button {
    float: left;
}

.note-page-titel-textbox {
    margin-bottom: 10px;
    width: 100%;
    min-width: 150px;
    /*max-width: 300px;*/
}
.note-page-titel-textbox-title {
    font-size: 20px;
    padding-top: 1.7rem;
    width: 100%;
}

.note-page-search-container {
    display: flex;
    width: 100%;
    margin-bottom: 5px;  
}

.note-page-searchbar-textbox {
    flex: 80%;  
}

.note-page-search-button {
    flex: 20%;  
    margin-left: 2px;
}

.note-page-create-button {
   width: 100%;
    margin-bottom: 5px;
}

.note-page-treeview-style {
    overflow-x: hidden; !important;
    overflow-y: auto;
    height: 100%;
}

/* Ensure the parent container uses flex layout */
.note-page-container {
    display: flex;
    width: 100%;
    height: 100%; /* Ensure it fills the available height */
    box-sizing: border-box;
}

/* Outer container for the file upload section */
.note-page-file-upload {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill the height of the parent */
    box-sizing: border-box;
}

/* Style for the text indicating the selected folder */
.selected-folder-text {
    font-weight: bold;
    margin-bottom: 10px;
}

/* The upload container grows to fill available space */
.note-page-file-upload-container {
    flex-grow: 1; /* Allow it to expand */
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 5px;
    box-sizing: border-box;
    overflow: auto;
}

/* The title inside the upload container */
.uploaded-files-title {
    margin-bottom: 10px;
}

/* The list of uploaded files should scroll if content overflows */
.uploaded-files-list {
    flex-grow: 1; /* Fills the remaining space in the container */
    overflow-y: auto;
    box-sizing: border-box;
}

.debtor-note-file-box {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.debtor-note-file-name {
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 50px;
    white-space: nowrap;
}



.debtor-note-delete-button {
    border-radius: 5px;
    font-size: 15px;
    width: 10%;
    height: 30px;
    border: none;
    font-weight: 600;
    color: white;
    min-width: 50px;
    background-color: #dc3545;
}

.debtor-note-file-box span:hover {
    color: white;
    padding: 2px;
    background-color: #3c4b64;
    border-radius: 2px;
}
/*end*/

/*Grid column that needs to be float right */
.column-text-right {
    text-align: right !important;
}
/*end*/

/* remove the default padding, so the template container expands to cover the whole appointment */
.k-scheduler .k-event{
    padding: 0px;
}
/* set some padding to the template containers, expand them and add any other desired customizations. 
Styles from the model will be obtained from the ItemTemplate context and set inline.
based on the specific appointment*/
.custom-appointment{
    width: 100%;
    height: 100%;
}
.k-scheduler-cell .k-heading-cell {
    display: none;
}
.k-scheduler-cell .k-slot-cell {
    border-width: 1px 0 0 0;
}
.k-group-content .k-scheduler-row:last-child {
    border-width: 0 0 1px 0 !important;
    border-style: solid !important;;
    border-color: #dee2e6 !important;;
}
.k-group-content .k-scheduler-row {
    border: none;
}

.santa-container {
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
    top: -155px;
    left: 26%;
}

.santa-container .svg{
    position: absolute;
    scale: 0.2;
}
.santa-container .plane{
    position: relative;
    -webkit-animation: float 3s infinite;
    animation: float 3s infinite;
}
@-webkit-keyframes float{
    50%{
        -webkit-transform: translateY(25px);
        transform: translateY(25px);
    }
}
@keyframes float{
    50%{
        -webkit-transform: translateY(25px);
        transform: translateY(25px);
    }
}
.santa-container .hand{
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-animation: wave 1.5s infinite;
    animation: wave 1.5s infinite;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}
.santa-container .blade{
    -webkit-animation:spin 1s infinite linear;
    animation:spin 1s infinite linear;
    -webkit-transform-origin: 50% 54%;
    -ms-transform-origin: 50% 54%;
    transform-origin: 50% 54%;
}
@-webkit-keyframes spin{
    100%{
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);
    }
}
@keyframes spin{
    100%{
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);
    }
}
@-webkit-keyframes wave{
    50%{
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
}
@keyframes wave{
    50%{
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
}
.santa-container .a{
    color: #F40009;
    font-family: "Poppins",sans-serif;
    position:absolute;
    right:20px ;
    top:20px;
    border:2px solid #F40009;
    text-decoration:none;
}
@media screen and (min-width: 451px) {
    .santa-container a {
        font-size: 20px;
        padding: 8px 12px;
    }
}

@media screen and (max-width: 450px) {
    .santa-container a {
        font-size: 14px;
        padding: 5px 8px;
    }
}
.custom-editor-text div.k-editor-content div.k-content {
    font-size: 16px !important;
    line-height: 0 !important;
}

/*Beta badge*/
.beta-badge {
    background-color: red;
    color: white;
    font-weight: bold;
    padding: 5px 5px;
    border-radius: 100%;
    font-size: 80%;
    margin-left: 5px;
    vertical-align: middle;
}
/**/

/* animation time*/
.k-child-animation-container {
    transition: none !important;

    /* to make dropdown animations faster*/
     transition-duration: 0ms !important; 
}
/**/

/*CustomGrid*/
.k-grid .k-cell-inner .k-grid-filter, .k-grid .k-cell-inner .k-header-column-menu, .k-grid .k-cell-inner .k-grid-header-menu {
    position: static;
    margin-inline-end: 0.3rem;
}
/*.k-grid-header .k-grid-filter.k-active,*/
/*.k-grid-header .k-header-column-menu.k-active,*/
/*.k-grid-header .k-grid-header-menu.k-active,*/
/*.k-grid-header .k-hierarchy-cell .k-icon.k-active {*/
/*    border-radius: 5px; !* Adjust the value as needed *!*/
/*}*/
/**/

/*DebtorInformation*/
 .custom-dropdown-menu {
     display: block !important;
     position: absolute;
     z-index: 1050;
     background-color: #fff;
     border: 1px solid #ccc;
     padding: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 }

.command-bar {
    margin-top: 10px !important;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    display: flex;
    align-items: center;
}

.form-button-fitcontent {
    width: fit-content;
    font-weight: bold;
}

.custom-commandbar-form-button {

    height: 40px;
}

.debtor-info-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.remove-page-info .k-pager-info,
.remove-page-info .k-pager-numbers-wrap {
    display: none;
}


.debtor-detail {
    display: contents; /* Allows label and span to be flexible */
}

.debtor-detail label {
    font-weight: bold;
    margin-right: 2px;
    grid-column: 1 / 2;
}

.debtor-detail span,
.debtor-detail a {
    grid-column: 2 / 3;
}

.debtor-detail a {
    color: blue;
    text-decoration: underline;
}
.k-tabstrip-items-wrapper .k-hstack {
    margin-left: -1px; !important;
}

/**/

.hide-time-picker-button .k-time-header .k-time-now,
.k-time-selector-header .k-time-now {
    border-width: 0;
    line-height: inherit;
    cursor: pointer;
    display: none !important;
}

.highlighted {
    background-color: lightgreen !important;
}

.custom-dropdown-item {
    display: flex;
    align-items: center;
}

.custom-dropdown-item input[type="checkbox"] {
    pointer-events: none; /* Disable pointer events to ensure the whole item is clickable */
}

.custom-dropdown-item label {
    margin-left: 8px;
    cursor: pointer;
}

/* EmployeeTimetrack */
.custom-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: calc(1vw + -0.3em) !important; /* Dynamically adjusts font size based on viewport width */
}

.employee-timetrack-table {
    width: 100%;
    table-layout: auto; /* Allows table to adjust column widths dynamically */
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

.employee-timetrack-table th,
.employee-timetrack-table td {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Prevents text wrapping */
}


.custom-row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.debtor-column {
    max-width: 300px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.debtor-column span {
    display: block; 
}

.resizable-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.resizable-checkbox input[type="checkbox"] {
    transform: scale(2.5);
    margin: 0;
    cursor: pointer;
}


.employee-timetrack-item {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
    max-height: 150px;
    overflow: hidden;
    color: white;
    padding: 10px;
}

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

.employee-timetrack-item.selected {
    background-color: yellow;
}

.employee-timetrack-card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.employee-timetrack-task-debtor {
    opacity: 0.8;
    font-size: 0.83em;
    margin: 0;
}

.tooltip-overlay {
    background-color: #555;
    color: white;
    padding: 10px;
    border-radius: 6px;
    max-width: 20%;
    position: fixed;
    z-index: 1000;
    left: 100%;
    white-space: normal;
    word-wrap: break-word;
    transform: translateX(-50%);
}

.employee-timetrack-title {
    font-size: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.employee-timetrack-description {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.employee-timetrack-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.employee-timetrack-non-transferred-container {
    position: relative;
}

.employee-timetrack-sticky-header {
    position: sticky;
    top: -20px;
    z-index: 2;
    width: 100%;
    padding-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.employee-timetrack-sticky-columns {
    position: sticky;
    z-index: 1;
    width: 100%;
}

.employee-timetrack-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px !important;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    border-radius: 5px;
    transition: background-color 0.3s;
    max-height: 150px;
    overflow: hidden;
}

ul.list-group .list-group-item.employee-timetrack-item {
    padding: 10px !important;
}

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

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/* Custom column widths */
.employee-timetrack-column {
    flex: 1;
    max-width: 12.5%;
    padding: 0 5px;
    text-align: center;
    box-sizing: border-box;
}

.employee-timetrack-non-transferred-list:last-child {
    padding-bottom: 20px;
}

.employee-timetrack-list:last-child {
    padding-bottom: 20px;
}

.kunde-column {
    flex: 3;
    max-width: 25%;
    white-space: normal;
    word-wrap: break-word;
}

.inactive-column {
    flex: 1;
    max-width: 12.5%;
}

.employee-timetrack-header {
    padding: 0;
    margin: -10px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.employee-timetrack-header .header-text {
    flex-grow: 1;
    text-align: left;
    margin-left: 10px;
}

.employee-timetrack-header .btn {
    margin: 0;
    padding: 5px 10px;
}

.employee-timetrack-header .btn i {
    font-size: 1.2em;
    margin-right: 1.0px;
}

.list-group-item + .list-group-item {
    border-top-width: 1px !important;
}

/* Ensure alignment */
.employee-timetrack-list-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.employee-timetrack-column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* Additional CSS for action buttons */
/*QuickLink*/
.quicklinks-container {
    display: flex;
    justify-content: space-around;
    padding: 10px;
}


.quicklink-section {
    flex: 1;
    margin: 0 10px;
    padding: 10px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    text-align: center;
}

.quicklink-section ul {
    list-style-type: none;
    padding: 0;
}

.quicklink-box {
    cursor: pointer;
    padding: 10px;
    margin: 5px 0;
    max-height: 80px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.quicklink-box:hover {
    background-color: #f0f0f0;
}
/**/

/*Privat/ledig*/
.employee-timetrack-dropdown-menu {
    min-width: 100%;
}
.employee-timetrack-dropdown-menu .employee-timetrack-dropdown-item {
    font-size: 1.5rem; 
    padding: 10px 20px;
    margin-bottom: 5px !important;
}
.employee-timetrack-dropdown-menu .employee-timetrack-dropdown-item:last-child {
    margin-bottom: 0;
}
/**/

.action-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 3vh !important;
    text-align: center !important;
}


/* Content inside the buttons */
.action-btn .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Icon inside the buttons */
.action-btn .icon {
    font-size: 3rem !important;
    margin-bottom: 0.5rem !important;
    width: auto !important;
    height: auto !important;
}

/* Text inside the buttons */
.action-btn span {
    font-size: 1rem !important;
    margin-top: auto !important;
    font-weight: bold !important;
}

/* Media query for min-width 768px */
@media (min-width: 768px) {
    .action-btn {
        min-height: 6vh !important;
    }

    .action-btn .content .icon {
        font-size: 3vh !important;
    }

    .action-btn .content span {
        font-size: 1vh !important;
    }
}

/* Media query for min-width 1024px */
@media (min-width: 1024px) {
    .action-btn {
        min-height: 8vh !important;
    }

    .action-btn .content .icon {
        font-size: 5vh !important;
    }

    .action-btn .content span {
        font-size: 1.1vh !important;
    }
}

/* Media query for min-width 1440px */
@media (min-width: 1440px) {
    .action-btn {
        min-height: 12vh !important;
    }

    .action-btn .content .icon {
        font-size: 6vh !important;
    }

    .action-btn .content span {
        font-size: 1.6vh !important;
    }
}



/* Styles for the information box */
.info-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 3vh !important;
    text-align: left !important;
    background-color: whitesmoke;
    border: none; 
    border-radius: 5px; 
    padding: 2px; 
    box-sizing: border-box; 
    max-width: 450px;
}
.info-box .task-name, .info-box .debtor-name {
    overflow: hidden;
    text-overflow: ellipsis; 
    max-height: 1.40em;
    text-align: left;
    position: relative;
}

.info-box .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.info-box .task-name {
    font-size: 1.2rem; 
    font-weight: bold; 
    text-align: left; 
    position: relative;
    top: -15px !important;
    left: 5px;
}

.info-box .debtor-name {
    font-size: 1rem; 
    text-align: left;
    width: 100%;
    position: relative;
    top: -20px;
    left: 5px;
}

.k-chart, .k-stockchart {
    display: block;
    height: 650px !important;
}

@media (min-width: 768px) {
    .info-box {
        min-height: 6vh !important;
    }

    .info-box .content .task-name {
        font-size: 1.2rem;
    }

    .info-box .content .debtor-name {
        font-size: 1rem; 
    }
}

@media (min-width: 1024px) {
    .info-box {
        min-height: 8vh !important;
    }

    .info-box .content .task-name {
        font-size: 1.4rem;
    }

    .info-box .content .debtor-name {
        font-size: 1.1rem; 
    }
}

@media (min-width: 1440px) {
    .info-box {
        min-height: 12vh !important;
    }

    .info-box .content .task-name {
        font-size: 1.6rem;
    }

    .info-box .content .debtor-name {
        font-size: 1.2rem; 
    }
}
/*Timetrack*/

.hover-effect {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.float-right {
    float: right;
}

.hover-effect:hover {
    color: darkblue !important;
}

.custom-timepicker .k-time-header .k-time-now, .k-time-selector-header .k-time-now {
    display: none !important;
}


.circular-button {
    display: block;
    width: 50vw; /* Set width to 50% of the viewport width */
    height: 50vw; /* Set height to 50% of the viewport width, keeping the button circular */
    max-width: 90vh; /* Ensure the button doesn't exceed 90% of the viewport height */
    max-height: 90vh; /* Same as above for height */
    border-radius: 50%; /* This makes the square a circle */
    background-color: #007bff; /* Change to your preferred color */
    color: white;
    text-align: center;
    vertical-align: middle;
    position: relative;
    margin: 0 auto; /* Center the button horizontally */
}
.circular-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    font-size: 1.5rem; /* Adjust the font size as needed */
}

.k-loader-custom-color .k-loader-segment {
    background-color: white;
}

.tile-with-overflow .k-tilelayout-item-body {
    overflow: auto !important;
}

/* Allow the TileLayout container to scroll if content overflows its set height */
.k-tilelayout {
    overflow: auto;
}


.btn-primary:focus {
    border: 2px solid !important;
    border-color: red !important;
}
/**/

/*Custom color in grid*/
.custom-column-red-background {
    background-color: lightcoral !important;
    background-image: repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2) 10px,
            transparent 10px,
            transparent 20px
    ) !important;
}

.custom-column-grey-background {
    background-color: #c5c5c5 !important;
    /*background-image: repeating-linear-gradient(*/
    /*        45deg,*/
    /*        rgba(251, 251, 251, 0.2),*/
    /*        rgba(255, 255, 255, 0.72) 10px,*/
    /*        transparent 10px,*/
    /*        transparent 20px*/
    /*) !important;*/
}

.custom-column-green-background {
    background-color: lightgreen !important;
    background-image: repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2) 10px,
            transparent 10px,
            transparent 20px
    ) !important;
}

.internal-row-color {
    background-color: lightgray !important;
    color: black; !important;
}

.external-row-color {
    background-color: white !important;
    color: black; !important;
}

.prepayment-row-color {
    background-color: lightgreen !important;
    color: black; !important;
}

.middle-line {
    position: relative;
}

.middle-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    padding-left: 5px;
    padding-right: 5px;
    top: 50%;
    border-bottom: 1px solid black; /* Adjust color and style as needed */
}

/**/

/*charts*/
.chart-container {
    flex-grow: 1;
    flex-basis: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    overflow: hidden;
    box-sizing: border-box;
    margin-left: -5px;
    margin-right: -5px;
}

.chart-header {
    border-bottom: 1px solid #ccc;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chart-title {
    margin: 0;
    font-size: 20px;
}

.chart-box {
    margin: 15px;
}

/**/

.toolbar-flex {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust spacing between elements */
}

.priorityMax {
 z-index: 1000000 !important;
}

.section {
    padding-left: 15px;
}

.custom-grid-row .k-grid-table .k-master-row > td {
    border: 1px solid lightgrey;
}

.custom-grid-row .k-grid-table .k-master-row > td {
    border: 1px solid lightgrey;
}

.custom-grid-row-darker .k-grid-table .k-master-row > td {
    border: 1px solid #cfcfcf;
}

.custom-grid-row-darker .k-grid-table .k-master-row > td {
    border: 1px solid #cfcfcf;
}

.custom-grid-row .k-grid-table .k-master-row.k-alt {
    background-color: rgba(0, 0, 0, 0.08);
}

/*Darkmode fixes*/
body.c-dark-theme .k-tilelayout {
    background-color: #343a40;
}

body.c-dark-theme .k-editor {
    background-color: whitesmoke;
}

body.c-dark-theme .note-page-file-upload {
    background-color: #212529 !important;
}

body.c-dark-theme .debtor-note-file-box {
    background-color: #000000 !important;
}


body.c-dark-theme .k-loader-container-overlay{
    opacity: 0.4;
    background: #000000 !important;;
}
body.c-dark-theme .k-loader-container-panel {
    background-color: #343a40;
}

body.c-dark-theme .employee-timetrack-list-container {
    border: 1px solid #3c4b64 !important;
}

body.c-dark-theme .employee-timetrack-non-transferred-container {
    border: 1px solid #3c4b64 !important;
}

body.c-dark-theme .info-box {
    background-color: #343a40;
}

body.c-dark-theme .employee-timetrack-sticky-columns {
    color: white;
}

body.c-dark-theme .employee-timetrack-actions-container{
    background-color: black !important;
    border: 1px solid #3c4b64 !important; 
}
.c-dark-theme .form-control {
    color: rgba(255, 255, 255, 0.87) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: #3c4b64 !important;
}

.c-dark-theme .k-chip-solid-base {
    color: rgba(255, 255, 255, 0.87) !important;
    background-color: #343a40 !important;
    border: 1px solid #3c4b64 !important;
}
/**/

.k-tabstrip-items-wrapper .k-item {
    color: #0d6efd;
    font-weight: bold;
}

.k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-items-wrapper .k-item.k-selected {
    border-color: var(--kendo-color-border, rgba(33, 37, 41, 0.13));
    color: var(--kendo-color-on-app-surface, #212529);
    background-color: var(--kendo-color-surface-alt, #ffffff) !important;
}

.custom-search-button  {
    max-height: 40px;
}


.custom-task-task-state-text-area {
    display: flex;
    flex-direction: column;
    height: 100%;
}


.custom-task-task-state-text-area .k-form-layout {
    flex-grow: 1; 
    height: 100%;
}


.custom-task-task-state-text-area .k-input {
    flex-grow: 1;
    height: 100%;
}

.custom-task-task-state-text-area textarea {
    height: 100%;
    min-height: 100%;
    resize: none; 
}

.custom-textarea-height-100 {
    height: 150px;
    width: 100%;
}

.custom-combobox-spacing {
    margin-bottom: 10px;
}

.sales-editor div.k-editor-content div.k-content {
    font-family: "Arial", Gadget, sans-serif;
}

.custom-floating-label-checkbox .k-floating-label {
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
}

.disable-chip-actions .k-chip-actions .k-chip-remove-action{
    display: none !important;
}

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

.full-screen {
    width: 100vw !important;
    height: 100vh !important;
}

.process-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.process-panel h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.box-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* but *never* more than 4 columns */
@media (min-width: 800px) {
    .box-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.process-panel-box {
    flex: 1 1 200px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.process-panel-box span {
    font-weight: bold;
    font-size: 1.1rem;
    color: #111;
}

.process-panel-box .detail {
    font-size: 0.9rem;
    color: #555;
}

.run-button {
    margin-top: auto;
    padding: 8px 16px;
    font-size: 1rem;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.run-button:hover:not(:disabled) {
    background-color: #0056b3;
}

.run-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Custom row height selector */
.row-height-button {
    margin-right: 5px;
}

.row-height-button:last-child {
    margin-right: 0;
}
/**/

/* Notifications */

/* Smooth removal animation for unread-only filter */
.notif-item.removing {
    overflow: hidden;
    animation: notifFadeOut 220ms ease forwards;
}
@keyframes notifFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
        max-height: 80px; /* approximate row height incl. padding */
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        margin-top: 0;
        margin-bottom: 0;
        border-bottom-width: 1px;
    }
    100% {
        opacity: 0;
        transform: translateY(-4px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        border-bottom-width: 0;
    }
}

.icon-btn {
    position: relative;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.badge {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    border-radius: 50%;
    padding: 0 4px;
    font-size: 0.75rem;
}

.notif-panel {
    position: absolute;
    width: 300px;
    max-height: 400px;
    margin-top: -8px;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    border-radius: 6px;
}

.panel-header, .panel-footer {
    padding: 0.5rem !important;
    border-bottom: 1px solid lightgray;
}

.panel-header {
    /*background-color: #f3f4f7;*/
}

.panel-footer {
    border-top: 1px solid #eee;
    border-bottom: none;
    text-align: center;
}

.panel-body {
    overflow-y: auto;
    flex: 1;
}

.notif-item {
    display: flex;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    border-bottom: 1px solid lightgray;
    background: #f6f6f6 !important;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.notif-item:hover {
    background-color: #e9e9e9 !important;
}

.notif-item.unread {
    background: #fff !important;
}

.notif-item.unread:hover {
    background-color: #f0f7ff !important;
}

body.c-dark-theme .notif-panel {
    background: #3c4b64 !important;
    border: 1px solid #343a40 !important;
    color: #fff !important;
}

body.c-dark-theme .notif-item {
    border-bottom: 1px solid #343a40 !important;
    color: black !important;
}

body.c.dark-theme .read-button {
    color: #fff;
}

body.c-dark-theme .notif-panel .panel-header,
body.c-dark-theme .notif-panel .panel-body,
body.c-dark-theme .notif-panel .panel-footer {
    background: inherit !important;
    color: #fff !important;
    border-color: #343a40 !important;
}

body.c-dark-theme .notification-banner {
    background-color: #2a2b36 !important;
    color: #fff !important;
}
body.c-dark-theme .notification-banner .banner-content {
    color: #fff !important;
}
body.c.dark-theme .notification-banner .banner-arrow {
    border-bottom-color: #2a2b36 !important;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.content .message {
    font-size: 0.9rem;
    color: #555;
}

.notification-content {
    padding-top: 0 !important;
}

.time {
    font-size: 0.75rem;
    color: #999;
}

.link-btn, .load-more {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 0.9rem;
}

.view-all {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.read-button {
    color: #3c4b64;
}

.notification-badge-pill {
    color: white;
    background-color: red;
    border-radius: 45%;
    width: 18px;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
    margin-left: -8px;
    margin-top: -15px;
}

 .notification-wrapper {
     position: relative;
 }
 
.notification-banner {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    box-shadow: 0 0 8px 5px rgba(0,0,0,0.15);
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    z-index: 1000;
    width: 300px;
}
.notification-banner.show {
    opacity: 1;
    visibility: visible;
}
.notification-banner .banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
}
.notification-banner .banner-content span {
    margin-left: 8px;
}
.notification-banner .banner-arrow {
    position: absolute;
    bottom: 100%;
    right: 32px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #f3f4f7;
}


/*#region Reports*/
:root {
    --report-bg: #f8f9fa;
    --panel: #ffffff;
    --panel-2: #ffffff;
    --text: #212529;
    --muted: #6c757d;
    --accent: #321fdb; /* Azure-ish */
    --line: #d8dbe0;
}

.report-shell { 
    display: flex; 
    flex-direction: column; 
    height: calc(100vh - 148px); 
    color: var(--text); 
}

.report-header { 
    display: flex;
    align-items: center; 
    padding: 12px 20px; 
    background: var(--panel-2); 
    border-bottom: 1px solid var(--line); 
}

.title-row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.title-row h1 { 
    font-size: 20px; 
    margin: 0; 
}

.chip { 
    padding: 2px 8px; 
    border: 1px solid var(--line); 
    border-radius: 999px; 
    font-size: 12px; 
    color: var(--muted); 
}

.meta-row { 
    display: flex; 
    gap: 8px; 
    color: var(--muted); 
    font-size: 14px;
    margin-top: 2px; 
}

.dot { 
    color: var(--line);
}

.report-body {
    display: grid; 
    grid-template-columns: 300px 1fr; 
    height: calc(100vh - 150px);
    position: relative;
    isolation: isolate;
    z-index: 0;
}

.section-label { 
    padding: 12px 14px; 
    text-transform: uppercase; 
    letter-spacing: .08em; 
    font-size: 11px; 
    color: var(--muted);
}

.nav-list { 
    list-style: none; 
    margin: 0;
    padding: 0; 
}

.nav-item { 
    border-top: 1px solid var(--line); 
}

.nav-item:first-child { 
    border-top: none; 
}

.nav-link { 
    width: 100%; 
    text-align: left; 
    background: transparent; 
    border: 0; 
    color: var(--text); 
    padding: 10px 12px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    cursor: pointer; 
}

.nav-link:hover { 
    background: #f3f4f6; 
}

.nav-item.selected > .nav-link, .nav-link.child.selected { 
    background: #edf2ff; 
    outline: 1px solid var(--accent); 
}

.group-toggle { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.group .chev { 
    width: 20px; 
    text-align: center; 
    color: var(--muted); 
}

.group .count { 
    color: var(--muted); 
    font-size: 12px; 
}

.child-list { 
    list-style: none; 
    margin: 0; 
    padding: 0 0 6px 28px; 
    background: #f8f9fa; 
}

.child .icon { 
    opacity: .8; 
}

.report-content { 
    background: var(--report-bg); 
    overflow: auto; 
    padding: 18px 22px;
    position: relative;
    z-index: 2000;
}

.panel { 
    background: var(--panel); 
    border: 1px solid var(--line); 
    border-radius: 8px; 
}

.panel-head { 
    padding: 14px 16px; 
    border-bottom: 1px solid var(--line); 
    display: flex; 
    align-items: baseline; 
    gap: 0 10px; 
}

.panel-head h2 { 
    margin: 0; 
    font-size: 18px; 
}

.muted { 
    color: var(--muted); 
}

.q-table { 
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.q-table th,
.q-table td {
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    white-space: nowrap;
}

.q-table td.muted {
    white-space: normal;
    word-break: break-word;
}

.q-table input[type="text"],
.q-table .k-input,
.q-table .k-textbox {
    width: 100%;
    box-sizing: border-box;
}

.q-table .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.q-table thead th { 
    text-align: left; 
    font-weight: 600; 
    font-size: 12px; 
    color: var(--muted); 
    padding: 10px 14px; 
    border-bottom: 1px solid var(--line); 
}

.q-table tbody td { 
    padding: 12px 14px; 
    border-bottom: 1px solid var(--line); 
    vertical-align: top; 
}

.state { 
    padding: 2px 8px; 
    border-radius: 999px; 
    font-size: 12px; 
    color: var(--text); 
}

.state.empty { 
    color: var(--muted); 
}

.empty { 
    padding: 16px; 
    color: var(--muted); 
}

.placeholder { 
    height: 100%; 
    display: grid; 
    place-items: center; 
    gap: 8px; 
    color: var(--muted); 
}

.secondary-list {
    background-color: #f8f9fa;
}

.left-nav {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-right: 1px solid var(--line);
    height: calc(100vh - 150px);
    position: relative;
    z-index: 1;
}
.left-nav .nav-scroll {
    overflow: auto;
    padding-bottom: 10px;
    min-height: 0;
    height: 92%;
}

.left-nav .nav-footer {
    position: sticky;
    bottom: 0;
    padding: 12px;
    background: var(--panel);
    border-top: 1px solid var(--line);
    height: 8%;
}
.left-nav .nav-footer :where(button, .k-button) {
    width: 100%;
}

.q-table tbody tr:first-child td:has(> .radio-group) {
    width: 35%;
}

.left-nav .nav-link {
    position: relative;
    padding-right: 28px; /* space for the checkmark */
}

.left-nav .nav-item.checkmarked > .nav-link::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'><path d='M1 5l3 3 7-7' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.left-nav .nav-link .count {
    margin-right: 22px;
}

.left-nav .nav-link { 
    position: relative; 
    padding-right: 44px; 
}

.left-nav .nav-item { 
    position: relative; 
}

.left-nav .dot-menu {
    position: absolute;
    right: 6px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e5e7eb; border-radius: 6px;
    background: #f9fafb;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    opacity: 0; transition: opacity .15s ease;
    pointer-events: none;
}

.left-nav .dot-menu.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.left-nav .dot-menu:hover { 
    background: #f3f4f6; 
}

/* Popup menu */
.left-nav .popup-menu {
    position: absolute;
    right: 6px; top: calc(50% + 16px);
    min-width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 5;
    padding: 4px;
}

.left-nav .popup-menu .menu-item {
    width: 100%; text-align: left;
    background: transparent; border: 0;
    padding: 8px 10px; border-radius: 6px;
    cursor: pointer; font-size: 14px;
}

.left-nav .popup-menu .menu-item:hover { 
    background: #f3f4f6;
}

.left-nav .popup-menu .menu-item.danger { 
    color: #b91c1c; 
}

.qname { display: inline-flex; align-items: center; gap: 8px; }

.q-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #94a3b8; /* slate-400 */
    font-size: 12px;
    line-height: 18px;
    cursor: default;
    user-select: none;
    font-weight: 700;
}

.q-help::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    bottom: auto;
    transform: translateY(-50%);
    padding: 6px 8px;
    background: #111827; /* gray-900 */
    color: #fff;
    font-size: 12px;
    line-height: 1.25;
    border-radius: 6px;
    white-space: normal;
    width: 280px;
    max-width: 50vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
    z-index: 2002;
}
.q-help::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 4px);
    bottom: auto;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #111827;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 2002;
}
.q-help:hover::after,
.q-help:hover::before {
    opacity: 1;
    visibility: visible;
}

/*#endregion*/

/*#region StringCombobox*/

.kit-cb {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: inherit;
}

.kit-cb-input {
    width: 100%;
    box-sizing: border-box;
    height: 2.4rem;
    padding: 0 2.4rem 0 0.6rem;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    outline: none;
}

.kit-cb-input:focus {
    border-color: #6c9df3;
    box-shadow: 0 0 0 3px rgba(108,157,243,.2);
}

.kit-cb-toggle, .kit-cb-clear {
    position: absolute;
    top: 0;
    right: 0.1rem;
    height: 2.4rem;
    border: 0;
    cursor: pointer;
    padding: 0 .4rem;
}

.kit-cb-toggle {
    background: #dee2e6;
    width: 29px;
}

.kit-cb-clear { right: 2rem; font-size: 1.2rem; line-height: 2.4rem; color: gray; }

.kit-cb-popup {
    position: absolute;
    z-index: 2000;
    left: 0; right: 0;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-top: none;
    overflow: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.kit-cb-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kit-cb-item {
    padding: .4rem .6rem;
    cursor: pointer;
    white-space: nowrap;
}

.kit-cb-item:hover, .kit-cb-item.active {
    background: #f0f4ff;
}
.kit-cb-empty { padding: .5rem .6rem; color: #666; }

 .pill-btn {
     background-color: #e9ecef !important; /* light gray */
     border: 1px solid #ced4da !important;
     border-radius: 50rem !important;     /* pill shape */
     padding: .25rem .75rem !important;   /* compact */
     font-weight: 500 !important;
 }
.pill-btn:hover {
    background-color: #dee2e6; /* slightly darker on hover */
    color: #000;
    border-color: #c1c9d0;
}

.selected-soft {
    background-color: rgba(13, 110, 253, 0.25) !important;
}

.cbc-row-pending {
    background-color: #fff3cd !important; /* light warning */
    color: #664d03 !important;            /* dark amber for readability */
}

.cbc-row-processed {
    background-color: #d4edda !important; /* light success */
    color: #155724 !important;             /* dark green for readability */
}

.cbc-toolbar-info {
    gap: 12px;
}

/*#endregion*/