#content:has(#WebUIStylesV2){
min-height: 0 !important;
}
.ss-content.ss-open-below {
display: flex;
z-index: 99999 !important;
}
#billing-tab #WebUIStylesV2{
padding: 0;
}
.modal:has(form[UIV2])
{
.modal-dialog {
top: 50%;
transform: translateY(-50%) !important;
}
.modal-content {
border-radius: 10px;
border: 0;
background: #FFF;
box-shadow: 0px 4px 10px 0px rgba(116, 116, 117, 0.25);
font-family: Lexend, serif;
}
.emrWebPopupHeader {
border-radius: 10px 10px 0px 0px;
background-color: #0A5BB8 !important;
font-size: 16px;
padding: 16px 22px 16px 30px;
font-weight: normal;
display: flex;
justify-content: space-between;
}
.emrWebCloseIcon{
cursor: pointer;
display: flex;
align-items: center;
}
.emrWebCloseIcon:hover{
svg path{
fill: #383838;
}
}
.modal-body {
padding: 30px;
background-color: transparent !important;
font-weight: 400;
max-height: 70vh;
overflow-y: auto;
}
.modal-body::-webkit-scrollbar {
width: 5px;
background-color: #f6f7f8;
}
.modal-body::-webkit-scrollbar-thumb {
width: 5px;
background-color: #C8DCF3;
}
.modal-footer {
padding: 20px 30px;
background-color: transparent !important;
display: flex;
align-items: center;
gap: 10px;
}
.modal-footer.center{
justify-content: center;
}
.modal-footer.right{
justify-content: flex-end;
}
.modal-footer.left{
justify-content: flex-start;
}
}
.modal.modal-fullscreen:has(form[UIV2]){
.modal-dialog {
top: 0 !important;
transform: unset !important;
}
}
.modal:has(form[UIV2]) + .modal-backdrop
{
background-color: rgba(10, 91, 184);
opacity: 0.3;
}
.modal:has(form[UIV2]), #WebUIStylesV2{
--bgcolor: #F6F7F8;
--color-green: #2EAB1A;
--color-red: #DE0106;
--color-blue: #0A5BB8;
--color-sky-blue: #4095F6;
--color-gray: #A0A0A0;
--color-orange: #FAA500;
--border-color-gray: #E1E4E8;
--textcolor: #383838;
--hover-row-color: #E5F7DA;
--alternate-row-color: #F1F5F8;
font-size:11px !important;
/* Layout primitives */
[stack] { display: flex; flex-direction: column; }
[inline] { display: flex; flex-direction: row; }
[grid] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
[wrap] { display: flex; flex-wrap: wrap; }
[split] { display: flex; }
[split] > * { flex: 1; }
[stack] > *, [inline] > * {
margin: 0 !important;
}
/* Gap system (unitless attribute value, px in CSS) */
[cgap="0"] { gap: 0px; }
[cgap="4"] { gap: 4px; }
[cgap="8"] { gap: 8px; }
[cgap="12"] { gap: 12px; }
[cgap="16"] { gap: 16px; }
[cgap="20"] { gap: 20px; }
[cgap="24"] { gap: 24px; }
[cgap="32"] { gap: 32px; }
[rgap="0"] { gap: 0px; }
[rgap="4"] { gap: 4px; }
[rgap="8"] { gap: 8px; }
[rgap="12"] { gap: 12px; }
[rgap="16"] { gap: 16px; }
[rgap="20"] { gap: 20px; }
[rgap="24"] { gap: 24px; }
[rgap="32"] { gap: 32px; }
/* Align & Justify */
[valign="start"] { align-items: flex-start; }
[valign="center"] { align-items: center; }
[valign="end"] { align-items: flex-end; }
[halign="start"] { justify-content: flex-start; }
[halign="center"] { justify-content: center; }
[halign="end"] { justify-content: flex-end; }
[halign="between"] { justify-content: space-between; }
[halign="around"] { justify-content: space-around; }
[halign="evenly"] { justify-content: space-evenly; }
/* Grow */
[grow="1"] { flex: 1; }
[grow="2"] { flex: 2; }
/* Debug outline */
[debug] * {
outline: 1px dashed rgba(255, 0, 0, 0.4);
}
[debug] {
background-color: rgba(255, 0, 0, 0.03);
padding: 1rem;
border-radius: 8px;
}
input[type="text"].form-control{
font-size: 11px !important;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/*
*****************************************************************************************************************************
Slimselect overriedes
****************************************************************************************************************************
*/
.ss-main {
font-family: inherit;
}
.ss-main:focus {
box-shadow: none;
}
.ss-main.ss-open-below {
border: 1px solid var(--color-sky-blue);
}
.ss-main .ss-values .ss-single {
background-color: var(--color-blue);
color: white;
padding: 2px 5px 2px 5px;
border-radius: var(--ss-border-radius);
}
.ss-main .ss-values .ss-value {
background-color: var(--color-blue);
}
.ss-main .ss-values .ss-value .ss-value-text {
font-size: 11px;
font-weight: 300;
}
.ss-main .ss-arrow {
width: 8px;
height: 8px;
}
.ss-content {
max-height: 200px;
}
.ss-content .ss-search input {
font: inherit;
font-family: "Lexend", serif;
}
.ss-content .ss-search input:focus {
box-shadow:none;
}
.ss-content .ss-list {
font-family: "Lexend", serif;
font-size: 11px;
}
.ss-content .ss-list::-webkit-scrollbar {
width: 5px;
background-color: #f0f0f0;
}
.ss-content .ss-list::-webkit-scrollbar-thumb {
background-color: #C8DCF3;
border-radius: 4px;
}
.ss-content .ss-list .ss-optgroup.ss-close .ss-option {
display: none !important
}
.ss-content .ss-list .ss-optgroup .ss-optgroup-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)
}
.ss-content .ss-list .ss-option:hover {
background-color: var(--color-sky-blue);
}
.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
color: #383838;
background-color: var(--bgcolor);
}
/*
*****************************************************************************************************************************
Button Styles
****************************************************************************************************************************
*/
.bttn {
appearance: none;
min-width: 105px;
height: 30px;
border-radius: 5px;
border: 1px solid var(--border-color-gray);
background-color: #fff;
font: inherit;
cursor: pointer;
font-weight: inherit;
font-size: 12px;
box-sizing: border-box;
padding: 8px 16px;
line-height: 1;
}
.bttn.large{
height: 40px;
}
.bttn.primary {
border-color: var(--color-green);
background-color: var(--color-green);
color: #fff;
}
.bttn.primary.outline {
border-color: var(--color-green);
background-color: white;
color: var(--color-green);
}
.bttn.secondary {
border-color: var(--color-blue);
color: var(--color-blue);
font-size: 11px;
height:28px;
}
.bttn.secondary:hover {
background-color: var(--color-sky-blue);
color: white;
border-color: transparent;
}
.bttn.resetall {
color: var(--color-red);
}
.bttn.cancel {
border-color: var(--border-color-gray);
color: var(--color-red);
}
.bttn.go{
min-width: unset;
}
button.icon {
border-radius: 3px;
background-color: var(--bgcolor);
height: 28px;
font: inherit;
font-size: var(--f11px);
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding-inline: 6px;
cursor: pointer;
border: none;
appearance: none;
color: inherit;
line-height: 1;
&:hover{
color: white;
background-color: var(--color-sky-blue);
}
&:active,
&.active {
color: var(--color-green);
background-color: var(--bgcolor);
}
}
button.icon.nobg {
background-color: transparent;
}
button.icon.nobg:hover svg path {
fill: var(--textcolor);
}
button.icon.comment {
color: var(--color-blue);
padding-inline: 0;
}
button.icon.save-view {
background-color: var(--color-sky-blue);
color: white;
padding: 6px 12px;
&:active {
color: white;
}
}
button.reset:focus, button.reset:focus-visible{
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-style: dotted;
scale: 1.1;
transition: scale 0.1s ease-in-out;
}
button.reset {
appearance: none;
border: none;
background-color: transparent;
color: var(--color-red);
font-size: var(--f10px);
cursor: pointer;
padding: 0;
padding-right: 2px;
}
.icon.link, .icon.link:hover{
color: var(--color-gray);
background-color: transparent;
}
.icon.link.active{
color: var(--color-blue);
background-color: transparent;
}
/*
*****************************************************************************************************************************
ICONS
****************************************************************************************************************************
*/
i{
width: 16px !important;
height: 16px !important;
overflow: hidden;
display: inline-block;
}
i::after{
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-position: 50% 50%;
background-repeat: no-repeat;
overflow: hidden;
}
i.closepopup::after{
background-image: url('data:image/svg+xml,');
}
i.closefilter::after{
background-image: url('data:image/svg+xml,');
}
i.close_settings::after{
background-image: url('data:image/svg+xml,');
}
button.icon:hover > i.close_settings::after{
background-image: url('data:image/svg+xml,');
}
i.filter::after{
background-image: url('data:image/svg+xml,') ;
}
button.icon:hover > i.filter::after{
background-image: url('data:image/svg+xml,') ;
}
button.icon:active > i.filter::after,
button.icon.active> i.filter::after {
background-image: url('data:image/svg+xml,') !important;
}
i.menu::after{
background-image: url('data:image/svg+xml,');
}
button.icon.open > i.menu::after{
background-image: url('data:image/svg+xml,');
}
i.csv::after{
background-image: url('data:image/svg+xml,');
}
button.icon:hover > i.csv::after{
background-image: url('data:image/svg+xml,');
}
button.icon:active > i.csv::after,
button.icon.active:hover > i.csv::after{
background-image: url('data:image/svg+xml,');
}
i.refresh::after{
background-image: url('data:image/svg+xml,');
}
button.icon:hover > i.refresh::after{
background-image: url('data:image/svg+xml,');
}
button.icon:active > i.refresh::after,
button.icon.active:hover > i.refresh::after{
background-image: url('data:image/svg+xml,');
}
i.print_green::after{
background-image: url('data:image/svg+xml,');
}
i.print_dark::after{
background-image: url('data:image/svg+xml,');
}
button.icon:active > i.print_dark::after,
button.icon.active > i.print_dark::after{
background-image: url('data:image/svg+xml,');
}
i.email:after{
background-image: url('data:image/svg+xml,');
}
i.comment::after{
background-image: url('data:image/svg+xml,');
}
i.add_comment::after{
background-image: url('data:image/svg+xml,');
}
i.card::after{
background-image: url('data:image/svg+xml,');
}
i.nocard::after{
background-image: url('data:image/svg+xml,');
}
i.new_alert::after{
background-image: url('data:image/svg+xml,');
}
i.calendar::after{
background-image: url('data:image/svg+xml,');
}
i.dollar_refresh::after{
background-image: url('data:image/svg+xml,');
}
i.trash::after{
background-image: url('data:image/svg+xml,');
}
button.icon:hover > i.trash::after{
background-image: url('data:image/svg+xml,');
}
i.trash_white::after{
background-image: url('data:image/svg+xml,');
}
i.info_icon::after{
background-image: url('data:image/svg+xml,');
}
i.save::after{
background-image: url('data:image/svg+xml,');
}
i.search::after{
background-image: url('data:image/svg+xml,');
}
i.open_popup::after{
background-image: url('data:image/svg+xml,');
}
i.pick_color::after{
background-image: url('data:image/svg+xml,');
}
i.open_popup_arrow::after{
background-image: url('data:image/svg+xml,');
}
i.edit::after{
background-image: url('data:image/svg+xml,');
}
i.green_lock::after{
background-image: url('data:image/svg+xml,');
}
i.plus::after{
background-image: url('data:image/svg+xml,');
}
i.plus_dark::after{
background-image: url('data:image/svg+xml,');
}
i.eye_open::after{
background-image: url('data:image/svg+xml,');
}
i.pdf::after{
background-image: url('data:image/svg+xml,');
}
button.icon:active > i.pdf::after,
button.icon.active > i.pdf::after{
background-image: url('data:image/svg+xml,');
}
i.up_circle_arrow::after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23383838' d='M13 20h-2V8l-5.5 5.5l-1.42-1.42L12 4.16l7.92 7.92l-1.42 1.42L13 8z'/%3E%3C/svg%3E");
}
i.down_circle_arrow::after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23383838' d='M11 4h2v12l5.5-5.5l1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5L11 16z'/%3E%3C/svg%3E");
}
i.excel::after{
background-image: url('data:image/svg+xml,');
}
i.upload::after{
background-image: url('data:image/svg+xml,');
}
i.clock::after{
background-image: url('data:image/svg+xml,');
}
i.expand::after{
background-image: url('data:image/svg+xml,');
}
button.icon:has(i.expand):hover,
button.icon:has(i.collapse):hover{
background-color: var(--bgcolor);
}
button.icon:hover > i.expand::after,
button.icon.active > i.expand::after{
background-image: url('data:image/svg+xml,');
}
i.collapse::after{
background-image: url('data:image/svg+xml,');
}
/*
*****************************************************************************************************************************
Datepicker Overrides
****************************************************************************************************************************
*/
.new_datepicker {
font: inherit;
text-transform: uppercase;
display: flex;
align-items: center;
border: 1px solid var(--border-color-gray);
width: 100px;
border-radius: 3px;
color: var(--textcolor);
position: relative;
background-color: transparent;
padding: 4px;
min-height: 28px;
}
.new_datepicker:focus-within {
border-color: var(--color-sky-blue);
outline: 0;
}
.new_datepicker input {
appearance: none;
border: 0;
font: inherit;
width: 85%;
color: inherit;
padding: 5px;
}
.new_datepicker input:focus {
border: 0;
outline: 0;
}
.new_datepicker::after{
display: none !important;
}
.new_datepicker .k-icon {
width: 15px;
height: 12px;
z-index: 1;
display: block;
position: absolute;
top:3px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjQ4MjUgMC45NjA5OThIOS40MzI5NVYwLjU4MTY1NkM5LjQzMjk1IDAuMjY1NTM5IDkuMTY3NDEgMCA4Ljg1MTI5IDBIOC40MzQwMkM4LjExNzkgMCA3Ljg1MjM2IDAuMjY1NTM5IDcuODUyMzYgMC41ODE2NTZWMC45NjA5OThINC4xNDc0NlYwLjU4MTY1NkM0LjE0NzQ2IDAuMjY1NTM5IDMuODgxOTMgMCAzLjU2NTgxIDBIMy4xNDg1M0MyLjgzMjQxIDAgMi41NjY4OCAwLjI2NTUzOSAyLjU2Njg4IDAuNTgxNjU2VjAuOTYwOTk4SDEuNTMwMDFDMC42ODI4MTQgMC45NjA5OTggMCAxLjY0MzgxIDAgMi40OTEwMVY5LjUzNDExQzAgMTAuMzgxMyAwLjY4MjgxNCAxMS4wNjQxIDEuNTMwMDEgMTEuMDY0MUg5LjIxNzk5QzkuNDgzNTMgMTEuMDY0MSA5LjczNjQyIDEwLjk2MyA5LjkyNjEgMTAuNzczM0wxMS43MDkgOC45OTAzOUMxMS44OTg3IDguODAwNzIgMTEuOTk5OCA4LjU0NzgyIDExLjk5OTggOC4yODIyOFYyLjQ5MTAxQzEyLjAxMjUgMS42NDM4MSAxMS4zMjk3IDAuOTYwOTk4IDEwLjQ4MjUgMC45NjA5OThaTTEuNTMwMDEgMS45MDkzNUgxMC40ODI1QzEwLjc5ODYgMS45MDkzNSAxMS4wNjQxIDIuMTc0ODkgMTEuMDY0MSAyLjQ5MTAxVjMuMjg3NjJIMC45NDgzNTNWMi40OTEwMUMwLjk0ODM1MyAyLjE2MjI1IDEuMjEzODkgMS45MDkzNSAxLjUzMDAxIDEuOTA5MzVaTTAuOTQ4MzUzIDkuNTM0MTFWNC4yMjMzM0gxMS4wNjQxVjcuNTIzNkg5LjQ4MzUzQzguOTI3MTYgNy41MjM2IDguNDcxOTUgNy45Nzg4MSA4LjQ3MTk1IDguNTM1MThWMTAuMTE1OEgxLjUxNzM2QzEuMjEzODkgMTAuMTAzMSAwLjk0ODM1MyA5Ljg1MDIzIDAuOTQ4MzUzIDkuNTM0MTFaTTkuNDIwMzEgOS45MTM0NVY4LjUzNTE4QzkuNDIwMzEgOC40OTcyNCA5LjQ0NTYgOC40NzE5NSA5LjQ4MzUzIDguNDcxOTVIMTAuODc0NEw5LjQyMDMxIDkuOTEzNDVaIiBmaWxsPSIjQTBBMEEwIi8+CjxwYXRoIGQ9Ik0yLjY1NTUyIDYuNTk4NjRDMy4wMjU2NSA2LjU5ODY0IDMuMzI1NjkgNi4yOTg1OSAzLjMyNTY5IDUuOTI4NDdDMy4zMjU2OSA1LjU1ODM1IDMuMDI1NjUgNS4yNTgzIDIuNjU1NTIgNS4yNTgzQzIuMjg1NCA1LjI1ODMgMS45ODUzNSA1LjU1ODM1IDEuOTg1MzUgNS45Mjg0N0MxLjk4NTM1IDYuMjk4NTkgMi4yODU0IDYuNTk4NjQgMi42NTU1MiA2LjU5ODY0WiIgZmlsbD0iI0EwQTBBMCIvPgo8cGF0aCBkPSJNNC44ODExMSA2LjU5ODY0QzUuMjUxMjMgNi41OTg2NCA1LjU1MTI4IDYuMjk4NTkgNS41NTEyOCA1LjkyODQ3QzUuNTUxMjggNS41NTgzNSA1LjI1MTIzIDUuMjU4MyA0Ljg4MTExIDUuMjU4M0M0LjUxMDk4IDUuMjU4MyA0LjIxMDk0IDUuNTU4MzUgNC4yMTA5NCA1LjkyODQ3QzQuMjEwOTQgNi4yOTg1OSA0LjUxMDk4IDYuNTk4NjQgNC44ODExMSA2LjU5ODY0WiIgZmlsbD0iI0EwQTBBMCIvPgo8cGF0aCBkPSJNNy4xMDY2OSA2LjU5ODY0QzcuNDc2ODIgNi41OTg2NCA3Ljc3Njg2IDYuMjk4NTkgNy43NzY4NiA1LjkyODQ3QzcuNzc2ODYgNS41NTgzNSA3LjQ3NjgyIDUuMjU4MyA3LjEwNjY5IDUuMjU4M0M2LjczNjU3IDUuMjU4MyA2LjQzNjUyIDUuNTU4MzUgNi40MzY1MiA1LjkyODQ3QzYuNDM2NTIgNi4yOTg1OSA2LjczNjU3IDYuNTk4NjQgNy4xMDY2OSA2LjU5ODY0WiIgZmlsbD0iI0EwQTBBMCIvPgo8cGF0aCBkPSJNOS4zMzIyOCA2LjU5ODY0QzkuNzAyNCA2LjU5ODY0IDEwLjAwMjQgNi4yOTg1OSAxMC4wMDI0IDUuOTI4NDdDMTAuMDAyNCA1LjU1ODM1IDkuNzAyNCA1LjI1ODMgOS4zMzIyOCA1LjI1ODNDOC45NjIxNSA1LjI1ODMgOC42NjIxMSA1LjU1ODM1IDguNjYyMTEgNS45Mjg0N0M4LjY2MjExIDYuMjk4NTkgOC45NjIxNSA2LjU5ODY0IDkuMzMyMjggNi41OTg2NFoiIGZpbGw9IiNBMEEwQTAiLz4KPHBhdGggZD0iTTIuNjU1NTIgOC45OTAxMkMzLjAyNTY1IDguOTkwMTIgMy4zMjU2OSA4LjY5MDA3IDMuMzI1NjkgOC4zMTk5NUMzLjMyNTY5IDcuOTQ5ODIgMy4wMjU2NSA3LjY0OTc4IDIuNjU1NTIgNy42NDk3OEMyLjI4NTQgNy42NDk3OCAxLjk4NTM1IDcuOTQ5ODIgMS45ODUzNSA4LjMxOTk1QzEuOTg1MzUgOC42OTAwNyAyLjI4NTQgOC45OTAxMiAyLjY1NTUyIDguOTkwMTJaIiBmaWxsPSIjQTBBMEEwIi8+CjxwYXRoIGQ9Ik00Ljg4MTExIDguOTkwMTJDNS4yNTEyMyA4Ljk5MDEyIDUuNTUxMjggOC42OTAwNyA1LjU1MTI4IDguMzE5OTVDNS41NTEyOCA3Ljk0OTgyIDUuMjUxMjMgNy42NDk3OCA0Ljg4MTExIDcuNjQ5NzhDNC41MTA5OCA3LjY0OTc4IDQuMjEwOTQgNy45NDk4MiA0LjIxMDk0IDguMzE5OTVDNC4yMTA5NCA4LjY5MDA3IDQuNTEwOTggOC45OTAxMiA0Ljg4MTExIDguOTkwMTJaIiBmaWxsPSIjQTBBMEEwIi8+CjxwYXRoIGQ9Ik03LjEwNjY5IDguOTkwMTJDNy40NzY4MiA4Ljk5MDEyIDcuNzc2ODYgOC42OTAwNyA3Ljc3Njg2IDguMzE5OTVDNy43NzY4NiA3Ljk0OTgyIDcuNDc2ODIgNy42NDk3OCA3LjEwNjY5IDcuNjQ5NzhDNi43MzY1NyA3LjY0OTc4IDYuNDM2NTIgNy45NDk4MiA2LjQzNjUyIDguMzE5OTVDNi40MzY1MiA4LjY5MDA3IDYuNzM2NTcgOC45OTAxMiA3LjEwNjY5IDguOTkwMTJaIiBmaWxsPSIjQTBBMEEwIi8+Cjwvc3ZnPgo=");
}
.k-i-calendar:before {
display: none;
}
.k-picker-wrap,
.k-select {
border: 0;
background-color: transparent !important;
padding: 0;
margin: 0
}
.k-picker-wrap {
display: flex;
gap: 3px;
}
.k-picker-wrap .k-input {
color: var(--textcolor);
padding: 0 !important;
padding-left: 4px !important;
margin: 0;
min-height: 0px;
border: none;
}
.k-picker-wrap .k-input::placeholder {
font-size: 10px !important;
color: var(--color-gray);
}
.k-select {
width: 15px;
height: 15px;
}
.new_datepicker .k-select::after {
display: none;
}
.new_datepicker {
width: auto
}
/*
*****************************************************************************************************************************
Filter Popover
****************************************************************************************************************************
*/
.filters{
position: relative;
}
.grid-filter {
border: 1px solid var(--border-color-gray);
position: absolute;
inset: auto;
padding: 0rem;
margin: 0;
margin-top: 3px;
border-radius: 4px;
width: 260px;
box-shadow: 0px 4px 10px 0px rgba(116, 116, 117, 0.25);
color: var(--textcolor);
z-index: 1;
background-color: white;
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 1rem;
border-bottom: 1px solid var(--border-color-gray);
max-width: 260px;
h3 {
margin: 0;
font-size: var(--f13px);
font-weight: 400;
}
button {
appearance: none;
border: none;
background-color: transparent;
cursor: pointer;
}
}
.filterbody {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
max-width: 260px;
border-bottom:1px solid var(--border-color-gray)
}
.filterbody::-webkit-scrollbar {
width: 5px;
background-color: #f6f7f8;
}
.filterbody::-webkit-scrollbar-thumb {
width: 5px;
background-color: #C8DCF3;
}
.daterange label{
color: var(--color-gray);
}
}
.filter-field-group {
border: 0;
border-bottom: 1px solid var(--border-color-gray);
padding: 12px 15px 15px 15px;
margin: 0;
}
.filter-field-group:last-child {
border: 0;
}
/* New Format Validations Block Start*/
.filter-field-group.error-from .datepickerFrom,
.filter-field-group.error-to .datepickerTo {
border-color: var(--color-red);
}
.filter-field-group.error-from .FromClass span,
.filter-field-group.error-to .ToClass span {
color: var(--color-red);
}
.filter-field-group.error-from .datepickerFrom .k-picker-wrap .k-input,
.filter-field-group.error-to .datepickerTo .k-picker-wrap .k-input {
color: var(--color-red) !important;
}
/*
*****************************************************************************************************************************
Input Fields
****************************************************************************************************************************
*/
input[type="checkbox"] {
margin: 0 !important;
appearance: none;
width: 12px;
height: 12px;
border: 1px solid var(--color-gray);
border-radius: 3px;
cursor: pointer;
min-width: 0px;
}
input[type="checkbox"]:focus{
outline: 1px solid var(--color-gray) !important;
}
input[type="checkbox"]:checked {
border: 3px solid var(--color-sky-blue);
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"]
{
color: var(--textcolor) !important;
padding: 4px 8px;
line-height: 1;
font-size: 11px !important;
appearance: none;
border: 1px solid var(--border-color-gray);
border-radius: 4px;
min-height: 30px;
}
i + input[type="text"], input[type="text"]:has( + i) {
padding: 0 !important;
min-height: 0;
flex-grow: 1;
color: var(--color-gray);
border: none;
}
div:has(> i + input[type="text"]),
div:has(> input[type="text"] + i) {
padding: 0px 8px !important;
border-radius: 4px;
min-height: 30px;
transition: 0.3s border linear;
border: 1px solid var(--border-color-gray);
}
div:has(> i + input[type="text"]):focus-within,
div:has(> input[type="text"] + i):focus-within{
border: 1px solid var(--color-sky-blue);
}
textarea {
color: var(--textcolor) !important;
padding: 4px 8px;
font-size: 11px !important;
}
.ag-theme-billing .ag-cell {
min-height: 40px !important;
padding: 4px !important;
word-break: normal;
white-space: normal;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 25px;
height: 13px;
}
.toggle-switch input {
display: none;
}
.toggle-switch .slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--bgcolor);
border-radius: 999px;
transition: .4s;
outline: 1px solid var(--border-color-gray);
cursor: pointer;
box-shadow: inset 0px 0px 4px 0px rgba(116, 116, 117, 0.25);
appearance: none;
border: 0;
}
.toggle-switch input:checked+.slider {
background-color: var(--color-green);
border: 0;
box-shadow: none;
}
.toggle-switch .slider:before {
position: absolute;
content: "";
height: 9px;
width: 9px;
left: 2px;
top: 2px;
background-color: var(--color-gray);
border-radius: 999px;
transition: .4s;
}
.toggle-switch input:checked+.slider:before {
transform: translateX(13px);
background-color: white;
}
.radio-group{
border: 1px solid var(--border-color-gray);
padding: 10px;
border-radius: 4px;
label{
cursor:pointer;
}
}
/*
*****************************************************************************************************************************
Navigation
****************************************************************************************************************************
*/
.underline-tabs {
display: flex;
justify-content: flex-start;
gap: 0.9375rem;
padding-bottom: 0.3125rem;
border-bottom: 1px solid var(--border-color-gray);
list-style: none;
padding-inline-start: 0;
li {
font-size: var(--f11px);
cursor: pointer;
}
li.active {
color: var(--color-green);
text-decoration: underline;
text-decoration-color: var(--color-green);
text-decoration-thickness: 3px;
text-underline-offset: 7px;
}
}
menu {
margin: 0;
list-style: none;
position: absolute;
left: 0px;
top: 25px;
z-index: 2;
background-color: white;
border: 1px solid var(--border-color-gray);
border-radius: var(--f10px);
box-shadow: 0px 4px 10px 0px rgba(116, 116, 117, 0.25);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
li {
font-size: var(--f12px);
button {
appearance: none;
border: 0;
background-color: transparent;
font: inherit;
white-space: nowrap;
}
button:hover {
color: var(--color-green);
cursor: pointer;
}
}
}
/*
*****************************************************************************************************************************
Popovers
****************************************************************************************************************************
*/
.dialog {
border: 1px solid #ccc;
background-color: white;
padding: 0;
margin: 0;
min-width: 333px;
/* Adjust width as needed */
border-radius: 10px;
border: 1px solid var(--border-color-gray);
box-shadow: 0px 4px 10px 0px rgba(116, 116, 117, 0.25);
.dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid var(--border-color-gray);
background-color: var(--color-blue);
border-radius: 10px 10px 0 0;
h2 {
font-weight: normal;
font-size: var(--f13px);
margin: 0;
color: white;
}
button.icon:hover svg path {
fill: inherit;
}
}
.dialog-body {
font-size: var(--f11px);
color: var(--textcolor);
max-height: 50vh;
overflow-y: auto;
overflow-x: hidden;
.column-option {
display: flex;
align-items: center;
padding: 10px 20px;
border-bottom: 1px solid var(--border-color-gray);
gap: 30px;
}
.column-label {
flex-grow: 1;
flex-shrink: 0;
min-width: 175px;
em {
display: block;
color: var(--color-gray);
font-style: normal;
}
}
.display-name {
border: 0;
appearance: none;
}
.display-name:focus {
outline: none;
}
}
.dialog-body::-webkit-scrollbar {
width: 5px;
background-color: #f0f0f0;
}
.dialog-body::-webkit-scrollbar-thumb {
background-color: #C8DCF3;
border-radius: 4px;
}
.dialog-footer {
display: flex;
flex-direction: column;
padding: 20px;
gap: 16px;
border-top: 1px solid var(--border-color-gray);
.info {
background-color: var(--bgcolor);
color: var(--color-red);
padding: var(--f12px);
display: flex;
gap: 7px;
border-radius: 4px;
justify-content: center;
p {
margin: 0;
}
}
.buttons {
display: flex;
justify-content: center;
gap: var(--f12px);
}
}
}
.tag {
display: inline-block;
padding: 2px 5px;
background-color: var(--bgcolor);
text-transform: uppercase;
line-height: 1;
border-radius: 3px;
margin: 1px;
}
.tag.green {
color: var(--color-green);
background-color: var(--hover-row-color);
}
.tag.red {
color: var(--color-red);
background-color: #FCE6E6;
}
span.value{
color: var(--color-blue);
}
/*
*****************************************************************************************************************************
grid table
****************************************************************************************************************************
*/
.grid-table {
width: 100%;
}
.grid-header {
display: grid;
min-height: 30px;
/* position: sticky; */
top: 0;
background-color: var(--color-blue);
border-radius: 3px;
overflow: hidden;
align-items: center;
.grid-cell {
color: white;
height: 100%;
align-content: center;
text-align: center;
}
}
.grid-body {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
.grid-body::-webkit-scrollbar {
width: 5px;
background-color: #f6f7f8;
}
.grid-body::-webkit-scrollbar-thumb {
width: 5px;
background-color: #C8DCF3;
}
.grid-row {
display: grid;
}
.grid-row:nth-child(even) {
background-color: #F1F5F8;
}
.grid-cell {
padding: 3px;
border: 1px solid var(--border-color-gray);
border-left-width: 0px;
border-top-width: 0px;
box-sizing: border-box;
text-align: center;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.grid-cell:first-child {
border-left: 1px solid var(--border-color-gray);
}
.table-format-2{
background-color: #fff;
border: 1px solid var(--border-color-gray);
border-radius: 8px;
color: var(--textcolor);
height: calc(100vh - 396px);
overflow-y: auto;
.table-format-2__container {
display: flex;
width: 100%;
flex-direction: column;
}
.table-format-2__header-row {
position: sticky;
top: 0;
z-index: 100;
background-color: white;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid var(--border-color-gray);
}
.table-format-2__header-row,
.table-format-2__data-row{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
}
.table-format-2__header-row > div,
.table-format-2__data-row > div{
padding: 12px 8px;
text-align: center;
border-right: 1px solid var(--border-color-gray);
}
.table-format-2__header-row > div:first-child,
.table-format-2__data-row > div:first-child {
text-align: left;
}
.table-format-2__header-row > div:last-child,
.table-format-2__data-row > div:last-child {
border-right: none;
}
.table-format-2__data-row{
border-bottom: 1px solid var(--border-color-gray);
}
.table-format-2__header-row {
color: var(--color-blue);
}
}
.table-format-2::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: #f6f7f8;
}
.table-format-2::-webkit-scrollbar-thumb {
width: 5px;
height: 5px;
background-color: #C8DCF3;
}
.no-data {
display: grid;
height: 100%;
place-content: center;
text-align: center;
gap: 0.9375rem;
h3 {
margin: 0;
font-size: 12px !important;
font-style: normal;
font-weight: 400;
line-height: 110%; /* 15.4px */
opacity: 0.5;
color:#a0a0a0;
}
}
ul.switch {
display: flex;
align-items: center;
justify-content: flex-start;
width: max-content;
height: 34px;
border-radius: 999px;
background: #FFF;
filter: drop-shadow(0px 4px 4px rgba(116, 116, 117, 0.05));
padding: 3px;
li {
cursor: pointer;
width: fit-content;
border-radius: 999px;
font-size: var(--f12px);
color: var(--color-gray);
height: 28px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
padding: 8px 10px;
}
li.active {
background-color: var(--color-orange);
color: white;
}
}
nav ul {
display: flex;
justify-content: flex-start;
background-color: white;
border-radius: 0.3125rem;
background: #FFF;
font-size: var(--f13px);
color: var(--color-gray);
padding: 3px;
box-shadow: 0px 4px 4px 0px rgba(116, 116, 117, 0.05);
li {
cursor: pointer;
padding: 8px 16px;
}
li.active {
background-color: var(--color-sky-blue);
color: white;
border-radius: 0.3125rem;
box-shadow: 0px 4px 5px 0px rgba(116, 116, 117, 0.15);
}
}
/*
*****************************************************************************************************************************
Animation
****************************************************************************************************************************
*/
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-1px);
}
50% {
transform: translateX(1px);
}
75% {
transform: translateX(-1px);
}
100% {
transform: translateX(0);
}
}
.shake {
animation: shake 0.1s ease-in-out;
}
}
#WebUIStylesV2{
--fw300: 300;
--fw400: 400;
--fw500: 500;
--f10px: 10px;
--f11px: 11px;
--f12px: 12px;
--f13px: 13px;
--f14px: 14px;
--f16px: 16px;
--f20px: 20px;
--radius-3px: 3px;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
font-family: "Lexend", serif;
font-optical-sizing: auto;
font-style: normal;
font-size: var(--f11px);
font-weight: var(--fw400);
color: var(--textcolor);
background-color: var(--bgcolor);
padding: 15px;
display: flex;
flex-direction: column;
gap: 6px;
height: 100%;
h2 {
font-size: var(--f16px);
font-weight: var(--fw500);
margin: 0;
}
.overlay {
border-radius: 0.3125rem;
border: 1px solid var(--border-color-gray);
background: #FFF;
box-shadow: 0px 4px 10px 0px rgba(116, 116, 117, 0.25);
}
.hide {
display: none !important;
}
table {
border-collapse: separate;
border-spacing: 0;
border-radius: 3px;
overflow: hidden;
border: 1px solid var(--border-color-gray);
}
table + table {
margin-top: 0.9rem
}
thead {
background-color: var(--color-blue);
color: white;
th,
tr {
font-weight: normal;
background-color: var(--color-blue);
}
}
tbody tr:nth-child(even) {
background-color: #F1F5F8;
}
th,
td {
padding: 2px 5px;
border-right: 1px solid var(--border-color-gray);
}
td p {
margin: 0;
padding: 0.3rem;
}
td:first-child {
text-align: center;
}
th:last-child,
td:last-child {
border-right: none;
}
.grid {
width: 100%;
height: 100%;
flex-grow: 1;
min-height: 0;
}
.balance-pagination {
display: flex;
gap: 7px;
font-size: var(--f11px);
align-items: center;
}
.pagination {
margin-left: auto;
display: flex;
align-items: center;
gap: 7px;
margin-block: 0;
line-height: 1;
button {
font: inherit;
border: 1px solid var(--border-color-gray);
background-color: var(--bgcolor);
padding: 0;
margin: 0;
text-align: center;
width: 19px;
height: 19px;
appearance: none;
cursor: pointer;
}
label {
margin: 0;
line-height: 1;
}
}
.balance-pagination+.btn-row {
margin-top: 50px;
gap: 12px
}
@media (width <= 1280px) {
.dialog{
position: fixed !important;
top: 50% !important;
left: 50% !important;
translate: -50% -50% !important;
}
}
}