:root {
    /* Colors */
    --button-primary-bg: #3b5eda;
    --button-primary-hover-bg: #304AA1;
    --button-secondary-bg: #fff;
    --button-secondary-text: #666D7A;
    --button-secondary-hover-bg: #F8F8F8;
    --button-secondary-hover-text: #1E2024;
    --button-settings-bg: #e9e9e9;
    --button-settings-hover-bg: #DCDCDC;
    --button-border-color: #D2D2D2;
    --button-hover-border-color: #A9A9A9;
    --button-disabled-text: #8B8B8B;
    --filter-parent-background-colour: #fff;
    --filter-background-colour: #F6F6F6;
    --filter-menu-text-colour: #5A5A5A;
    --filter-menu-background-colour: #F2F2F2;
    --tab-label-colour: #495057;
    --tab-label-disabled: #adb5bd;
    --tab-label-hover: #3B5EDA1A;
    --header-info-card-color: #202d41;
    --header-info-card-background-color: #F3F4F5;
    --background-color-transparent: transparent;
    --grid-header-background-color: #E8E8E8;
    --multicolumn-dropdown-content-color: #1D1D1D;
    --multicolumn-dropdown-cell-active-color: #EFEFEF;
    --input-text-color: #000000;
    --input-background: #FFFFFF 0% 0% no-repeat padding-box;
    --button-font-color: #666D7A;
    --numeric-icon-bg-color: #EFEFEF;
    /* Typography */
    --button-font-family: 'Segoe UI', sans-serif;
    --button-font-size: 12px;
    --font-size-large: 18px;
    --font-size: 14px;
    --font-weight-small: 400;
    --button-font-weight: 600;
    --button-line-height: 16px;
    --button-letter-spacing: 0.12px;
    --button-font-color: #666D7A;
    --form-label-content-font: normal normal normal 14px/1px Segoe UI;
    --multicolumn-dropdown-content-font: normal normal normal 13px/1px Segoe UI;
    --multicolumn-dropdown-content-letter-spacing: 0.13px;
    --form-label-content-letter-spacing: 0.14px;
    --settings-bg-font: normal normal 600 12px/16px Segoe UI;
    /* Dimensions */
    --button-padding: 4px 8px;
    --button-border-radius: 4px;
    --button-border-width: 0.5px;
    --button-icon-size: 16px;
    --button-icon-gap-small: 4px;
    --button-icon-gap-large: 8px;
    --button-container-min-height: 32px;
    --button-container-margin: 5px;
    --button-collapsed-width: 33.81px;
    --button-collapsed-height: 32px;
    /* Loader */
    --button-loader-size: 18px;
    --button-loader-border-width: 4px;
    /* radius */
    --border-radius: 4px;
    /* border */
    --header-info-card-item-border: 0.5px solid #C5C5C5;
    --header-grid-item-border: 1px solid #D1D1D1;
    --header-info-card-item-border-radius: 3px;
    --notification-border-info: 2px solid #17a2b8;
    --notification-border-success: 2px solid #28a745;
    --notification-border-warning: 2px solid #ffc107;
    --notification-border-danger: 2px solid #dc3545;
    --notification-border-primary: 2px solid #007bff;
    --notification-border-secondary: 2px solid #6c757d;
    --notification-border-dark: 2px solid #343a40;
    --multicolumn-dropdown-cell-active-border: 0.5px solid #E6E6E6;
    --input-border: 0.5px solid #828585;
    --input-border-onhover: 0.5px solid #3b5eda;
    /*form*/
    --form-error-red: #CB0D0D;
    /* Size */
    --height-fill-parent: 100%;
    --weight-fill-parent: 100%;
    --form-input-height: 30px;
    --form-input-min-width: 240px;
    /*button*/
    --button-width-save: 66px;
    --button-width-cancel: 76px;
    --button-height: 32px;
    --button-font: normal normal 600 12px/16px Segoe UI;
    --button-letter-spacing: 0.12px;
    --button-border-radius: 4px;
    --button-margin-left: 5px;
    /*fonts*/
    --font-normal: normal normal normal 14px Segoe UI;
    --font-bold: normal normal bold 14px Segoe UI;
    /*letter spacing*/
    --letter-spacing-normal: 0.14px;
    /*Text colour*/
    --text-colour-normal: #5A5A5A;
    --text-input-colour-background-disabled: #f0f0f0;
    --text-input-colour-disabled: #a0a0a0;
    --text-input-border-color: #d0d0d0;
    /*error*/
    --error-colour: #000000;
    --error-background-colour: #FCF6F6;
    --error-border: 0.5px solid #CB0D0D;
}

/*all inputs*/
input, select, textarea {
    color: var(--input-text-color) !important;
    font: var(--font-normal);
    letter-spacing: var(--letter-spacing-normal) !important;
    text-align: left;
    width: var(--weight-fill-parent);
    min-width: var(--form-input-min-width);
    height: var(--form-input-height);
}

.e-input-group.e-control-container.e-control-wrapper,
.e-numeric.e-valid-input.e-input-group.e-control-container.e-control-wrapper {
    background: var(--input-background) !important;
    border: var(--input-border) !important;
    border-radius: var(--border-radius) !important;
    opacity: 1;
}

/*all input have blue when on hover*/
.e-input-group:hover:not(.e-disabled),
.e-input-group.e-control-wrapper:hover:not(.e-disabled),
.e-numeric.e-valid-input.e-input-group:hover:not(.e-disabled),
.e-numeric.e-valid-input.e-input-group.e-control-wrapper:hover:not(.e-disabled) {
    border: var(--input-border-onhover) !important;
}

/*all inputs remove on active blue box shadow around*/
.e-input-group.e-control-container.e-control-wrapper.e-input-focus,
.e-numeric.e-valid-input.e-input-group.e-control-container.e-control-wrapper.e-input-focus {
    box-shadow: none !important;
}

.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    box-shadow: none !important;
}
/*all labels*/
label {
    text-align: left;
    font: var(--font-normal);
    letter-spacing: var(--letter-spacing-normal) !important;
    color: var(--text-colour-normal);
}

/*date picker*/
.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    background: none;
}


.e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
    background: none;
    color: #343a40;
}

/*form scrollable container*/
.scrollable-container {
    overflow: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    /*    height: calc(100% - 48px);*/
    border: 0.5px solid #c5c5c5;
    border-radius: 0px 0px 3px 3px;
    background: #F3F4F5 0% 0% no-repeat padding-box;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
}


/*Dropdowns*/
.e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
    height: 75%;
    width: 100%;
    content: url('/images/dropdown-arrow-icon.svg');
}

.e-ddl.e-input-group.e-control-wrapper[aria-expanded="true"] .e-ddl-icon::before {
    content: url('/images/dropdown-arrow-up-icon.svg');
}

/*Numeric textbox spinners*/
.e-numeric > .e-input-group-icon.e-spin-down,
.e-numeric > .e-input-group-icon.e-spin-up {
    background-color: var( --numeric-icon-bg-color);
}

.e-numeric > .e-input-group-icon::before {
    height: 75%;
    width: 100%;
}

.e-numeric > .e-input-group-icon.e-spin-down::before {
    content: url('/images/dropdown-arrow-icon.svg');
}

.e-numeric > .e-input-group-icon.e-spin-up::before {
    content: url('/images/dropdown-arrow-up-icon.svg');
}

/*Checkbox styling*/
/*color*/
.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
}

/*remove input overlay and ensure color*/
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check {
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
    box-shadow: none !important;
}
/*remove input overlay and ensure color*/
.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-checkbox-wrapper .e-checkbox:active + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame {
    background-color: #fff;
    border-color: var(--button-primary-bg);
    box-shadow: none !important;
}

.e-multi-line-input.e-auto-width.e-input-group.e-control-container.e-control-wrapper{
    width:100%;
}

/*google popup*/
.pac-container.pac-logo {
    z-index: 2000;
}