.cmd-btn-icon-btn {
    background: transparent;
    border: 1px solid transparent; /* invisible default */
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.cmd-btn-icon-btn:hover,
.cmd-btn-icon-btn:focus {
    border-color: #3C85AE; /* visible only on hover */
    background-color: rgba(60,133,174,.10); /* subtle highlight */
}

.cmd-btn-icon-btn i {
    font-size: 1rem; /* adjust icon size here */
    color: #3C85AE;
}

.cmd-btn-icon-btn:hover i {
    color: #005c89;
}

.cmd-btn-edit-icon {
    font-size: 1.00rem; /* adjust size */
    cursor: pointer;
    color: #3C85AE; /* brand blue */
    border: none !important;
}

.cmd-btn-edit-icon:hover {
    color: navy !important; /* darker on hover */
    transform: scale(1.1); /* subtle zoom */
}

.cmd-btn-delete-icon {
    font-size: 1.00rem;
    font-weight: 700 !important;
    cursor: pointer;
    color: #ff4000 !important;
    border: none !important;
}

.cmd-btn-delete-icon:hover {
    color: #cc3300 !important;  
    transform: scale(1.1);  
}



.need-icon {
    font-size: 1.35rem;
    text-shadow: 0 0 1px currentColor;
}

.cursor-pointer {
    cursor: pointer;
}
.nr-checkbox {
    transform: scale(1.2) !important;
    border: 2px solid #495057 !important;
}

.nr-checkbox:checked {
    background-color: #dc3545 !important; /* red */
    border-color: #dc3545 !important;
}


.ichn-status-icon {
    width: 1.15rem;
    height: 1.15rem;
    display: inline-block;
    border-radius: 50%;
    flex: 0 0 auto;
}


 /*  Green */
.ichn-status-icon.filled {
    background: radial-gradient(circle at 50% 40%, #86efac 0 45%, #16a34a 46%);
}

/*   Deep Blue */
.ichn-status-icon.overage {
    background: radial-gradient(circle at 50% 40%, #a5b4fc 0 45%, #1e40af 46%);
}

/* Committed (Has been filled) — Yellow */
.ichn-status-icon.open {
    background: radial-gradient(circle at 50% 40%, #fcd34d 0 45%, #ea580c 46%);
}

/* Expired (Unfulfilled) — Black / Charcoal */
.ichn-status-icon.expired {
    background: radial-gradient(circle at 50% 40%, #9FA1A6 0 45%, #111827 46%);
    /*background: radial-gradient(circle at 50% 40%, #fca5a5 0 45%, #dc2626 46%);*/
}

/* Closed (No longer actionable) — red */
.ichn-status-icon.closed {
    /*background: radial-gradient(circle at 50% 40%, #d8b4fe 0 45%, #7c3aed 46*/   /*purple*/
    background: radial-gradient(circle at 50% 40%, #fca5a5 0 45%, #dc2626 46%); /*red*/
}


/* Disabled / Inactive — Neutral Gray */
.ichn-status-icon.disabled {
    background: radial-gradient(circle at 50% 40%, #e5e7eb 0 45%, #9ca3af 46%);
}


/* Responsive tweaks */
.ichn-primary {
    color: #3C85AE !important;
    background-color: red !important;
}

.ichn-secondary {
    color: #3C85AE !important;
    background-color: lightgray !important;
}

.ichn-warning {
    color: #E5A21B !important;
    background-color: !important;
}

.ichn-green-color {
    color: #3EAB0B !important;
}

.ichn-yellow-color {
    color: #E5A21B !important;
}

.ichn-red-color {
    color: #BD1010 !important;
}

.ichn-blue-color {
    color: #3A22E5 !important;
}

.ichn-disabled-color {
    color: #929A96 !important;
}

.ichn-expired-color {
    color: #CC6CE7 !important;
}


.ichn-btn-good {
    color: white !important;
    background-color: #3EAB0B !important;
}

.ichn-btn-warning {
    color: white !important;
    background-color: #E5A21B !important;
}

.ichn-btn-stop {
    color: white !important;
    background-color: #BD1010 !important;
}


/*****************************************************************/
/*******************  Icon Label Styling  ************************/

.il-title-link-specifics {
    color: navy !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.il-title-link-specifics:hover {
    cursor: pointer !important;
    color: blueviolet !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.il-subtitle-link-specifics {
    color: dimgray !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.0rem !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.il-subtitle-link-specifics:hover {
    cursor: pointer !important;
    color: blueviolet !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.il-display-specifics {
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Base icon style */
.il-icon-btn {
    font-size: 1.25rem;
    color: #3C85AE;
    border: none;/* 1px solid #3C85AE;*/
    border-radius: 50%; /* 👈 makes it round */
    padding: 10px; /* gives room around the icon */
    width: 2.0rem; /* ensure equal width/height */
    height: 2.0rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Hover state */
.il-icon-btn:hover {
    color: #fff; /* white icon color */
    background-color: #3C85AE; /* fill background */
    border-color: #2a6280; /* darker border on hover */
    transform: scale(1.05); /* subtle zoom */
}

/* Optional: active (clicked) state */
.il-icon-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}


/*******************  Icon Label Styling  ************************/    
/*****************************************************************/

.e-customsize.e-checkbox-wrapper .e-frame {
    height: 20px;
    width: 20px;
    padding: 4px 0;
    border: 1px solid #9c9c9c;
}

.e-customsize.e-checkbox-wrapper .e-check {
    font-size: 15px;
}

.e-customsize.e-checkbox-wrapper .e-ripple-container {
    height: 20px;
    top: -11px;
    width: 47px;
}

.e-customsize.e-checkbox-wrapper .e-label {
    line-height: 20px;
    font-size: 20px;
}

.custom-numeric.e-numerictextbox {
    border: 2px solid #2196F3 !important;
    border-radius: 8px;
    background-color: #f0f8ff;
    padding: 5px;
}

/* Input field inside the textbox */
.custom-numeric input.e-input {
    background-color: #f0f8ff;
    font-size: 1.1rem;
    color: #0d47a1;
    border: none !important;
}

/* Up/down spinner icons */
.custom-numeric .e-input-group-icon {
    color: #ffffff;
    background-color: #2196F3;
    border-radius: 4px;
}

/* Hover effect */
.custom-numeric.e-numerictextbox:hover {
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}


/***************************************************/
/*******************  tab stuff  ******************/

.e-tab .e-tab-header .e-toolbar-item.e-active {
    background: white !important;
    border: 1px solid lightgrey !important;
}

.e-tab .e-tab-header {
    background: transparent !important !important;
    border-bottom: 1px solid lightgrey !important;
    margin-bottom: 5px !important;
}

.e-tab .e-tab-header .e-toolbar-items {
    background: transparent !important;
}


/***************************************************/
/***************************************************/


/***************************************************/
/*******************  link stuff  ******************/

.span-cell {
    margin-left: 5px;
    color: black;
    text-decoration: none;
    font-weight: 400;
    font-size: 1em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.link-specifics {
    margin-left: 5px;
    color: blue;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.link-specifics:hover {
    cursor: pointer;
    color: blueviolet;
    text-decoration: underline;
    font-weight: 700;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ichn-cell-link {
    margin-left: 5px;
    color: blue;
    text-decoration: underline;
    font-weight: bold;
    font-size: small;
    text-transform: capitalize;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ichn-cell-link:hover {
    color: blueviolet;
    text-decoration: none;
    cursor: pointer;
    font-weight: 700;
    text-transform: capitalize;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ichn-cell-link-red {
    margin-left: 5px;
    color: maroon;
    text-decoration: underline;
    font-weight: bold;
    font-size: small;
    text-transform: capitalize;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ichn-cell-link-red:hover {
    color: lightcoral;
    text-decoration: none;
    cursor: pointer;
    font-weight: 700;
    text-transform: capitalize;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/***************************************************/
/***************************************************/

.required-field {
    color: red;
    font-size:medium;
    font-weight: 700;
    margin-left: 2px;
    margin-right: 2px;
}

.e-checkbox-wrapper.e-custom .e-frame.e-check,
.e-checkbox-wrapper.e-custom .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
    background-color: #2196f3 !important;
    color: white !important;
}

.e-checkbox-wrapper.e-custom:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
    background-color: #2196f3 !important;
    color: white !important;
}

.e-checkbox-wrapper.e-custom:hover .e-frame { /* csslint allow: adjoining-classes */
    border: 2px solid maroon;
}

.e-checkbox-wrapper.e-custom .e-frame { /* csslint allow: adjoining-classes */
    height: 20px !important;
    width: 20px !important;
    align-content: center !important;
    text-align: center !important;
    margin-left: 10px !important;
    border: 1px solid navy;
}

.side-by-side {
    display: inline-block !important;
    margin-right: 10px !important; /* Adjust the spacing as needed */
}

.dlg-body {
    display: flex;
    justify-content: center;
}

.form-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-label {
    font-weight: bold;
}

.custom-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.search-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1px 1px;
    background: #fff;
}

.search-container input {
    border: none !important;
    outline: none !important;
    padding: 5px;
}

.search-icon {
    cursor: pointer;
    color: gray;
    font-size: 15px;
}

.icon-container {
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center; /* vertical center */
    height: 35px; /* or any fixed height */
    width: 35px; /* optional */
    margin-bottom: 10px;
    /* border: 1px solid #ccc; /* just for visibility */ */
}

.icon-container:hover {
    background-color: darkgrey !important;
    color: white;
}


.no-spin .e-spin {
    display: none;
}

.custom-toolbar-button {
    border: 1px solid #121010 !important;
    height: 20px !important;
    max-height: 20px !important;
    /*margin: 1px 1px;*/
    padding: 0px !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    margin-left: 5px !important;
    border-radius: 5px !important; /* Optional: Rounds the corners */
    background-color: transparent !important; /* Keep the default background */
    border-color: #ccc !important; /* Match the border color */
}

.custom-toolbar-button:hover {
        background-color: transparent !important;
        color: white;
}

.custom-toolbar-button-alt {
    border: 1px solid #121010 !important;
    height: 20px !important;
    max-height: 20px !important;
    /*margin: 1px 1px;*/
    padding: 0px !important;
    margin-right: 10px !important;
    margin-top: 1px !important;
    margin-bottom: 13px !important;
    margin-left: 5px !important;
    border-radius: 5px !important; /* Optional: Rounds the corners */
    background-color: transparent !important; /* Keep the default background */
    border-color: #ccc !important; /* Match the border color */
}

    .custom-toolbar-button-alt:hover {
        background-color: transparent !important;
        color: white;
    }


/*button:disabled {
    background-color: lightgray;*/ /* Set a fixed color */
    /*color: white;
    cursor: not-allowed;
}*/

/* Prevent hover effect when disabled */
/*button:disabled:hover {
    background-color: lightgray;*/ /* Keep the same color */
/*}*/
    
.page-header-btn-css {
    vertical-align: middle;
    align-content: center;
    background-color: white;
    border: none;
}

.page-header-btn-css:hover {
    vertical-align: middle;
    align-content: center;
    background-color: lightblue;
    border: none;
}

.bd-page-title-bar {
    background-image: linear-gradient(90deg, rgb(8, 39, 103) 0%, #538cc6 30%);
    color: #edf6fc;
    margin-top: 1px;
    margin-bottom: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: .5rem;
    height: 3rem;
    border-radius: .5rem;
    display: flex;
    justify-content: space-between; /* pushes text left, icon right */
    align-items: center; /* vertically center both */
    padding: 0.5rem 1rem;
    padding-top: 0.5rem;
    max-width: 100%;
}

@media (max-width: 400px) {
    .bd-page-title-bar {
        max-width:100%;
    }
}

@media (max-width: 575px) {
    .bd-page-title-bar {
        border-radius: .75rem;
        box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
        width: 100%;
    }
}


.bd-page-title {
    background-color: transparent;
    margin-bottom: 0px;
    padding-bottom: 1px;
    float: none;
    display: inline-block;
    text-align: center;
    font-size: 1.0rem;
    font-family: "Helvetica", sans-serif;
}

.ichn-cb-css {
    vertical-align: middle !important;
    align-content: center !important;;
    background-color: transparent !important;
    border: none !important;
    color: black !important;
}

.ichn-cb-css:hover {
    background-color: lightgray !important;
}


/*.ichn-btn {
    margin-left: 5px;
    margin-right: 5px;
    width: 100px;
    max-width: 100px;
    height:30px;
    max-height:30px
}*/
/* Boostrap Buttons Styling */

.no-grow {
    flex: 0 0 auto; /* do not grow, do not shrink, width = content */
}
.flex-1 {
    flex: 1;
}

.ichn-btn {
    font-size: 12px;
    font-weight: 700;
    /*color: rgba(108, 88, 179, 0.75);*/
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(108, 89, 179, 0.75);
    border-radius: 1rem;
    /*background: transparent;*/
    transition: all 0.3s ease 0s;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    /*width: 100px;
    max-width: 120px;*/
    height: 30px;
    max-height: 30px;
    /*flex: auto;*/
}

.ichn-btn-150 {
    margin-left: 2px;
    margin-right: 2px;
    width: 150px;
    max-width: 150px;
    height: 30px;
    max-height: 30px;
}

.ichn-btn-flex {
    font-size: 12px;
    font-weight: 700;
    /*color: rgba(108, 88, 179, 0.75);*/
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(108, 89, 179, 0.75);
    border-radius: 1rem;
    /*background: transparent;*/
    transition: all 0.3s ease 0s;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    /*width: 400px;*/
    /*min-width: 100px;
    max-width: 400px;*/
    height: 30px;
    max-height: 30px;
    flex: auto;
}


.ichn-btn:hover,
.ichn-btn-flex:hover {
    background-color: lightgray;
    color: black;
}

.ichn-btn:disabled,
.ichn-btn.disabled,
.ichn-btn-flex.disabled {
    pointer-events: none; /* Prevents interactions */
    opacity: 0.65; /* Keeps it visually disabled */
}

    .ichn-btn:disabled:hover,
    .ichn-btn.disabled:hover,
    .ichn-btn-flex.disabled:hover {
        background-color: lightgray; /* Keeps original background */
        color: inherit; /* Prevents color changes */
    }


/******************************************************************/
/******************************************************************/
/******************************************************************/



.div-data-element {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    color: yellow
}

.p-label {
    padding: 0 0 0 0;
    margin: 0.75rem 0 0 0;
    color: #37617a;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bolder;
}
.p-content {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    color: black;
    font-size: 14px;
    font-weight: 400;
    color: black;
}

.page-header-style {
    font-size: 1.5rem;
    color: black;
    font-weight: bold;
    text-transform: !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ichn-chip {
    display: inline-block;
    height: 2.25rem;
    padding: 0 1.2rem;
    font-size: 0.75rem;
    line-height: 2.25rem;
    border-radius: 1.2rem;
    background-color: #60676a;
}

/****************************************************/
/*** Check Box Container ***/
/****************************************************/


/* Customize the label (the container) */
.cb-container {
    display: block;
    position: relative;
    padding-left: 1.0rem;
    /*margin-bottom: 100px;*/
    cursor: pointer;
    font-size: 1.0rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .cb-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0.25rem;
    left: -0.5rem;
    height: 0.8rem;
    width: 0.8rem;
    background-color: white;
}

/* On mouse-over, add a grey background color */
.cb-container:hover input ~ .checkmark {
    background-color: darkseagreen;
}

/* When the checkbox is checked, add a blue background */
.cb-container input:checked ~ .checkmark {
    background-color: dodgerblue;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.cb-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.cb-container .checkmark:after {
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/****************************************************/
/*** end: Check Box Container ***/
/****************************************************/