html {
font-size: 12px;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: auto;
    min-width: 1024px; 
    /* Supports only laptop and tablets.
       Mobile are not supported in this UI.
    */
}

:root {
    --content-bg: #f5f7fa; /* Light gray background */
    --content-inner-bg: #ffffff; /* Optional card/inner */
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

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

/* ================= VALIDATION CONTROL ================= */

/* Target the validation message container */
.dx-invalid-message .dx-overlay-content.dx-invalid-message-content {
    min-height: 20px !important; /* set fixed height */
    line-height: normal; /* lets line-height adapt to text */
    display: flex; /* use flex to center content vertically */
    align-items: center; /* vertically centers the text */
    padding: 0 5px; /* optional: horizontal padding */
    box-sizing: border-box; /* ensures padding doesn't break layout */
}

/* ================= PAGE CONTENT ================= */

.main-layout {
    flex: 1;
    display: flex;
    overflow: hidden;
}

#content {
    background: var(--content-bg);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#content main {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* padding: 0px;*/
    scroll-behavior: smooth;
}

#content main > *:first-child {
     margin-top: 0 !important;
}

/* ================= PAGE BREADCRUMB ================= */

.breadcrumb-container {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.breadcrumb-container svg {
    width: 14px;
    height: 14px;
    stroke: #555;
    cursor: pointer;
    transition: 0.2s;
    vertical-align: text-bottom;
}

.breadcrumb-start {
    color: #007bff;
    cursor: pointer;
}

.breadcrumb-start svg {
    stroke: #007bff !important;
    cursor: pointer;
}

.breadcrumb-separator {
    margin: 0 3px;
}

.breadcrumb-current {
    font-weight: 500;
    cursor: default;
}

.breadcrumb-middle {
    cursor: default;
}

.breadcrumb-middle-link {
    cursor: pointer;
}

.top-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 3px 6px;
}

/* Icons */
.top-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 10px;
}

.top-icons a svg {
     width: 14px;
     height: 14px;
     stroke: #555;
     cursor: pointer;
     transition: 0.2s;
}

.top-icons i {
     width: 14px;
     height: 14px;
     stroke: #555;
     cursor: pointer;
     transition: 0.2s;
}

.top-icons a {
     display: contents;
}

.top-icons a svg:hover {
    stroke: #000;
}

.top-icons svg {
    width: 17px;
    height: 17px;
    stroke: #555;
    cursor: pointer;
    transition: 0.2s;
    color:blue;
}

.top-icons svg:hover {
    stroke: #000;
}

.breadcrumbSave svg {
    stroke: #0F6CBD !important;
}

.breadcrumbClose svg {
    stroke: #e53935 !important;
}

.page-title-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* ================= PAGE LIST ================= */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding: 6px 0;*/
}

/* Title */
.page-title {
    display: flex;
    /* margin-left: 10px;
    align-items: center;
    gap: 8px;*/
}

.page-title h4 {
    margin: 0;
    font-weight: 600;
}

/* Icon box */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #cffae5;
    border-radius: 6px;
}

.icon-box svg {
    width: 24px;
    height: 24px;
    stroke: #147946;
}

/*============= GRID CONTROL ===========*/

.dx-data-row {
    /*background: #fafafa;*/
    border-radius: 8px;
    margin-bottom: 8px;
    transition: 0.2s;
    font-size: 13px;
}

/* Header hover effect */
.dx-datagrid .dx-header-row > td:hover {
    background-color: #cffae5 !important;
}

/* Header */
.dx-header-row {
    font-weight: 500;
    color: #000;
}

/* Remove row separators */
.dx-datagrid-rowsview .dx-row {
    border-bottom: none !important;
}

/* Remove scroll restriction */
.dx-datagrid-rowsview {
    max-height: none;
    overflow: visible;
}

/* GRID CONTAINER  */
#gridContainer {
    background: #fff;
    border-radius: 10px;
    padding: 5px;
    padding-bottom: 0;
}

/*Grid alt row*/
.dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td {
    /* background-color: #f5f7fa !important;*/
}

/* GRID PAGER  */
.dx-datagrid .dx-pager {
    padding: 5px 0;
}

.dx-datagrid .dx-page:hover {
    background: #f1f5f9;
}

.dx-popup-content {
    /* background-color: #f5f7fa !important;*/
}
/*  SEARCH  */
.dx-datagrid-search-panel {
    margin-bottom: 10px;
}

.gridHeaderAdd {
    padding-top: 8px !important;
}

.gridHeaderAdd svg {
    height: 20px;
    width: 20px;
}

.gridHeaderBorder {
    border-radius: 4px;
    border-width: 1px;
    border-style: none !important;
}

.gridHeaderExport {
    border-style: none !important;
    /* padding-top: 1px !important;*/
}

.gridHeaderExport svg {
    height: 20px !important;
}

.dx-toolbar-after {
    display: flex !important;
    justify-content: center !important;
    align-items: initial !important;
}

/* Text Section (Title and Subtitle) */
.page-title-texts {
    flex: 1; /* Allow this section to take available space */
    margin-left: 10px; /* Space between logo and texts */
    /* margin-top: 15px;*/
}

.page-title-texts h4 {
    font-size: 16px;
    font-weight: bold;
    color: #333; /* Dark text color for title */
    margin: 0;
}

.page-title-texts p {
    font-size: 14px;
    color: #757575; /* Light gray for the subtitle */
}

/* fOR SINGLE  */
.page-title-texts-single {
    flex: 1; /* Allow this section to take available space */
    margin-left: 10px; /* Space between logo and texts */
    margin-top: 6px;
}

.page-title-texts-single h4 {
    font-size: 16px;
    font-weight: bold;
    color: #333; /* Dark text color for title */
    margin: 0;
}

.page-title-texts-single p {
    font-size: 14px;
    color: #757575; /* Light gray for the subtitle */
}

.gridbuttonicons {
    color: #99A1AF !important;
}

.gridAction {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    cursor: pointer;
}

.gridAction label,
.inactive-checkbox {
    cursor: pointer;
}

.gridAction svg {
    height: 16px;
    width: 16px;
    color: #99A1AF;
}

.grid-column-name {
    max-width: auto; /* restrict maximum width */
    white-space: nowrap; /* prevent wrapping */
    text-overflow: ellipsis; /* show ... when text is too long */
}

.grid-column-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
}

.grid-column-status.accepted {
    background: #e6f7ef;
    color: #1a7f5a;
}

.grid-column-status.active {
    background: #e6f7ef;
    color: #1a7f5a;
}

.grid-column-status.pending {
    background: #fff4d6;
    color: #c89b00;
}

.grid-column-status.declined {
    background: #ffe6e6;
    color: #d11a2a;
}

.grid-column-status.inactive {
    background: #ffe6e6;
    color: #d11a2a;
}

.grid-column-status.expired {
    background: transparent;
    color: #ff8c00;
    border: 1px solid #ff8c00;
}

.grid-column-status.enabled {
    background: #e6f7ef;
    color: #1a7f5a;
}

.grid-column-status.maintenance {
    background: #fff4d6;
    color: #c89b00;
}

.grid-column-status.disabled {
    background: #ffe6e6;
    color: #d11a2a;
}

.grid-column-status.down {
    background: transparent;
    color: #ff8c00;
    border: 1px solid #ff8c00;
}

.grid-column-status.blocked {
    background: #fff4d6;
    color: #c89b00;
}

    .grid-column-status.deactivated {
        background: #d3d3d3;
    }

.name-inital {
    display: flex;
    align-items: center;
}

.name-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #99A1AF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 10px;
    font-size: 12px;
}

.name-img {
    width: 16px;
    height: 16px;
    color: #99A1AF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 10px;
    font-size: 14px;
}

.name-text {
    font-weight: 600;
    font-size: 14px;
}

.name-sub-text {
    font-size: 11px;
    color: #888;
}

.master-detail-box {
    display: flex;
    justify-content: space-between;
    background: #fafafa;
}

.master-detail-item {
    flex: 1;
}

.master-detail-label {
    font-size: 12px;
    color: #777;
}

.master-detail-value {
    font-weight: 600;
    margin-top: 4px;
}

.dx-datagrid-rowsview .dx-master-detail-row > .dx-master-detail-cell {
    padding: 10px !important;
    padding-left: 30px !important;
}

/* ================= FORM CONTROL ================= */

/* COMMON CSS FOR THE PAGES WHERE WE SHOW THE FORM CONTENT */
.form-panel {
    background-color: #fff;
    /*background-color: red;*/
    padding: 10px 10px 1px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);*/
}

.form-panel-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* COMMON CSS FOR THE PAGES WHERE WE SHOW THE FORM CONTENT IN 2 BOXEX IN A SAME ROW */
.form-sub-panel-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
}

.form-sub-panel {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    flex: 1; /* both take equal width */
    display: flex;
    flex-direction: column;
    /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);*/
}

.form-sub-panel-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.form-panel h3 {
    font-size: 14px;
    font-weight: bold;
    color: #4CAF50;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.form-sub-panel h3 {
    font-size: 14px;
    font-weight: bold;
    color: #4CAF50;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 14px;
}

.form-row.form-row-column {
    flex: 1;
    min-width: 250px;
}

.form-row input {
    width: 100%;
    font-size: 14px;
}

.form-row > div {
   flex: 1;
}

/* Windows style group */
.groupbox-border {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
}

/* Windows style group text */
.groupbox-text {
    position: absolute;
    top: -10px; /* adjust to sit on border */
    left: 15px;
    background: #fff; /* cover border line behind text */
    padding: 0 5px;
    font-weight: bold;
}

/* Make this block behave like one grid column */
.form-field-switch {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Label + switch in one row */
.form-field-switch-text {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 4px;
}
/* switch align */
.form-field-switch-align {
    margin-left: 5px;
}
/* label align */
.label {
    margin-right: 10px; /* spacing between label and input */
    display: flex;
    align-items: center; /* vertically center label and input */
}

/* Right side switch and left side any control  */
.field-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 250px;
}
/* Left side switch and right side any control  */
.field-group2 {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
/* Right side switch and left side label  */
.field-group label {
    min-width: 120px;
}
/* Switch fixed size */
.switch-left-side {
    flex: 0 0 auto;
    margin-right: 24px;
}
/* Dropdown takes remaining width */
.selectBox-right-side {
    flex: 1;
    min-width: 0;
}

/* ================= FORM STICKY ================= */

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 0px 23px 0px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 36px;
}

/* Logo */
.form-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cffae5;
    border-radius: 6px;
    margin-left: 5px;
    width: 36px;
    height: 36px;
}

.form-logo svg {
    color: #147946;
    width: 24px;
    height: 24px;
}

/* Header Text */
.form-title {
    flex: 1;
    margin-left: 8px;
}

.form-title h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.form-title p {
    font-size: 13px;
    color: #777;
    margin: 0;
}

/* Buttons */
.form-action {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px; /* Adds space between the buttons */
    margin-right: 50px;
}

/* Styling for the buttons */
.form-action-button {
    /* padding: 10px 20px;*/
    /*background-color: #009966;*/ /* Green for "Save Company" */
    color: white; /* White text */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    border-style: none !important;
}

/* Disabled button styling */
.form-action-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.dx-icon-close {
    color: #333 !important;
}

.dx-switch-local {
    margin-right: 20px !important;
}

.configure {
    height: 25px;
    font-weight: 400;
    margin-left: 20px !important;
    font-size: 14px;
}

/* ================= ACCORDION CONTROL ================= */

.accordion-title-color {
    background-color: #ECFDF5 !important;
}

.accordion-title-color-alt {
    background-color: #fff !important;
}

/* ================= TAB CONTROL ================= */

.tab-control {
    margin: 5px 30px;
}

.dx-tabpanel .dx-multiview-wrapper {
    border: none !important;
}

/* REMOVE DEFAULT DEVEXTREME LOOK */
.dx-tabpanel,
.dx-tabpanel-tabs,
.dx-tabpanel-container {
    border: none !important;
    box-shadow: none !important;
}

/* ================= INPUT CONTROL ================= */

.dx-texteditor,
.dx-dropdowneditor,
.dx-numberbox,
.dx-datebox,
.dx-tagbox {
/*  border-radius: 10px !important;*/
height: auto !important;
background-color: #f9fafb !important;
}

.dx-texteditor-container {
    /* border-radius: 10px !important;*/
    overflow: hidden !important;
}

/* Hover */
.dx-texteditor:hover,
.dx-dropdowneditor:hover {
    border-color: #4CAF50 !important;
}

.dx-texteditor.dx-state-focused,
.dx-dropdowneditor.dx-state-focused {
    border-color: #4CAF50 !important;
    box-shadow: none !important;
    outline: none !important;
}

.capitalcase input {
    text-transform: uppercase;
}

/* ================= BUTTONS CONTROL ================= */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #147946;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}

.btn.primary {
    background: #cffae5;
    color: #147946;
}

.btn.primary svg {
    width: 14px;
    height: 14px;
}

.btn.secondary {
    background: #eef1f5;
    color: #555;
}

.dx-button .dx-button-content {
    gap: 5px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 5px !important;
}

.dx-button.dx-button-content:hover {
    background-color: #F5F5F5 !important;
}

.dx-button.dx-state-focused {
    background-color: #F5F5F5 !important;
    border-color: #147946 !important;
    box-shadow: none !important;
}

/* ================= DROP DOWN CONTROL ================= */

/* DEFAULT */
.dx-dropdowneditor-icon {
    background: none !important;
}

/* HOVER */
.dx-dropdowneditor.dx-state-hover .dx-dropdowneditor-icon,
.dx-dropdowneditor-button.dx-state-hover .dx-dropdowneditor-icon {
    background: none !important;
}

/* CLICK / ACTIVE */
.dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon,
.dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon {
    background: none !important;
}

/* FOCUS */
.dx-dropdowneditor.dx-state-focused .dx-dropdowneditor-icon {
    background: none !important;
}

/* OPENED DROPDOWN */
.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon {
    background: none !important;
}

/* ================= SWITCH STATES ================= */

/* OFF → RED */
.switch-off .dx-switch-container {
    border: 1px solid #ef4444 !important;
    background-color: #fff1f2;
}

.switch-off .dx-switch-handle::before {
    background: #ef4444 !important;
}

/* ON → GREEN */
.switch-on .dx-switch-container {
    border: 1px solid #009966 !important;
    background-color: #ecfdf5;
}

.switch-on .dx-switch-handle::before {
    background: #009966 !important;
}

/* ================= SWITCH BASE ================= */

.dx-switch-wrapper {
    width: 60px !important;
}

.dx-switch-container {
    border-radius: 12px;
    border: 1px solid #009966;
    transition: all 0.3s ease;
}

/* HANDLE */
.dx-switch-handle::before {
    background: #009966;
    border: 1px solid #009966;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dx-switch.dx-state-focused .dx-switch-handle::before {
    background: #009966;
    border-radius: 10px;
}

.dx-switch-on-value .dx-switch-handle::before {
    background: #009966;
    border: 1px solid #009966;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
    html {
        font-size: 12px;
    }
    .avatar {
        width: 34px;
        height: 34px;
    }

    .name {
        font-size: 12px;
    }

    .sub {
        font-size: 10px;
    }

    .top-icons svg {
        width: 12px;
        height: 12px;
    }
}

.confirmation-popup {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    font-family: Arial, sans-serif;
}

.confirmation-icon i {
    font-size: 60px;
    color: #e53935;
    margin-bottom: 15px;
}

.confirmation-icon svg {
    font-size: 60px;
    color: #e53935;
    margin-bottom: 15px;
}



.confirmation p {
    font-size: 18px;
    color: #666;
    max-width: 500px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.confirmation-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.popup-btn-content {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
}

.popup-btn-content svg {
    width: 16px;
    height: 16px;
}

/* ================= CARD ================= */
.invite-form {
max-width: 750px;
margin: 10px auto;
padding: 10px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}


.invite-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}

.icon-box {
background: #d1f2e1;
padding: 6px;
border-radius: 7px;
}