/* site theme properties */

/* override the bootstrap base theme colors */
:root {
    --site-base-color: #373A40;
    --site-inverse-color: #ffffff;
    --site-accent-color: #ff6209;
    --site-complementary-color: #09A6FF;
    --site-accent-color-filter: invert(63%) sepia(64%) saturate(6496%) hue-rotate(353deg) brightness(105%) contrast(107%);
    --site-accent-color-background: #fff1ea;
    --site-accent-color-hover: #ff772d;
    --site-accent-color-ripple: #ffad84;
    --site-complementary-color-filter: invert(64%) sepia(65%) saturate(5706%) hue-rotate(178deg) brightness(104%) contrast(102%);
    --site-secondary-color-background: #ffffff;
    --site-secondary-color-hover: #f0f0f0;
    --site-secondary-color-ripple: #e0e0e0;
    --site-namedcolor-coolgray-50: #F9FAFB;
    --site-namedcolor-coolgray-100: #F3F4F6;
    --site-namedcolor-coolgray-200: #E5E7EB;
    --site-namedcolor-coolgray-300: #D1D5DB;
    --site-namedcolor-coolgray-400: #9CA3AF;
    --site-namedcolor-coolgray-500: #6B7280;
    --site-namedcolor-coolgray-600: #4B5563;
    --site-namedcolor-coolgray-700: #374151;
    --site-namedcolor-coolgray-800: #1F2937;
    --site-namedcolor-coolgray-900: #111827;
    --site-text-color: var(--site-namedcolor-coolgray-800);
    --site-error-color-50: #FEF2F2;
    --site-error-color-300: #FCA5A5;
    --site-error-color-400: #F87171;
    --site-error-color-500: #EF4444;
    --site-error-color-600: #DC2626;
    --site-information-color-50: #F0F9FF;
    --site-information-color-700: #0369A1;
    --site-success-color-50: #F4FBEE;
    --site-success-color-700: #007546;
    --site-yellow-color-50: #FFF3E0;
    --site-yellow-color-300: #FFB84D;
    --site-yellow-color-400: #FFA726;
    --site-yellow-color-500: #FF9800;
    --site-yellow-color-600: #FF8C00;
    --site-purple-color-50: #BA60BE;
    --site-purple-color-300: #8E0F9E;
    --site-purple-color-400: #7B0997;
    --site-purple-color-500: #6B058F;
    --site-purple-color-600: #4B0082;
}

/* override checkbox colors */
.dxbl-checkbox.valid.modified:not([type=checkbox]) {
    --dxbl-checkbox-check-element-checked-bg: var(--site-accent-color);
    --dxbl-checkbox-switch-checked-bg: var(--site-accent-color);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--site-accent-color);
    --dxbl-checkbox-switch-checked-hover-bg: var(--site-accent-color);
    --dxbl-checkbox-radio-checked-hover-bg: var(--site-accent-color);
}

/* popup constants */
.dxbl-modal {
    --dxbl-popup-margin: 0;
    --dxbl-popup-header-bg: white;
    --dxbl-popup-border-style: none;
    --dxbl-popup-header-font-size: 24px;
    --dxbl-popup-max-width: 560px;
}

/* grid properties */
.dxbl-grid {
    --dxbl-grid-border-color: var(--site-namedcolor-coolgray-200);
}

/***********************/
/* popup forms setting */
/* The style for the visible popup edit form that slides in from the right */
.theme_popup_form_style {
    justify-self: end !important;
    height: 100%;
    animation: show-animate 0.25s ease 1 normal;
    /* to override on a per-page basis, add a style that overrides this property */
    /*--dxbl-popup-max-width: 500px; */
}

/* no border radius for the shelf */
.dxbl-modal .theme_popup_form_style {
    --dxbl-popup-border-radius: 0;
}

/* keyframes for sliding the form in from the right */
@keyframes show-animate {
    0% {
        transform: translateX(calc(var(--dxbl-popup-max-width) - 1px));
    }

    100% {
        transform: translateX(0px);
    }
}
/* The style for the visible popup edit form when it is hiding and sliding out to the right */
.theme_popup_form_style_hide {
    justify-self: end !important;
    height: 100%;
    animation: hide-animate 0.25s ease 1 normal;
}

/* keyframes for sliding the form out to the right */
@keyframes hide-animate {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(var(--dxbl-popup-max-width));
    }
}

/* popup forms setting */
/***********************/

/* form header text */
.theme_header_text {
    font-weight: 400;
    font-size: 34px;
    line-height: 36px;
    color: var(--site-text-color);
    padding-bottom: 12px;
}

/* form sub-header text */
.theme_subheader_text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--site-text-color);
}

/* input text 100% width */
.theme_inputtext_fullwidth {
    width: 100%;
    height: 32px;
    padding: 0;
    font-size: 16px;
    background-color: white;
    border-style: none;
}

/* makes the Clear button hover background color Gray instead of Orange */
    .theme_inputtext_fullwidth .dxbl-edit-btn-clear:hover {
        background-color: var(--site-namedcolor-coolgray-200) !important;
    }

/* input combobox 100% width */
.theme_inputcombobox_fullwidth {
    width: 100%;
    height: 32px;
    padding: 0;
    font-size: 16px;
    background-color: white;
    border-style: none;
}

/* removes the separator line between the combobox text and the dropdown button */
.dxbl-btn-group > .dxbl-btn.dxbl-btn-outline-secondary, .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-outline-secondary, .dxbl-btn-group-vertical > .dxbl-btn.dxbl-btn-outline-secondary, .dxbl-btn-group-vertical > .dxbl-btn-split > .dxbl-btn.dxbl-btn-outline-secondary {
    border-left: 0;
}

/* makes the Clear button hover background color Gray instead of Orange */
.theme_inputcombobox_fullwidth .dxbl-edit-btn-clear:hover {
    background-color: var(--site-namedcolor-coolgray-200) !important;
}

/* input tagbox 100% width */
.theme_inputtagbox_fullwidth {
    width: 100%;
    height: unset !important;
    padding: 0 4px 2px 4px;
    font-size: 16px;
    background-color: white;
    border-style: none;
}

/* makes the Clear button hover background color Gray instead of Orange */
    .theme_inputtagbox_fullwidth .dxbl-edit-btn-clear:hover {
        background-color: var(--site-namedcolor-coolgray-200) !important;
    }

/* checkbox theme */
.theme_checkbox {
}

/* radiobutton theme */
.theme_radiobutton {
    font-size: 16px;
}

/* apply to a formlayoutitem that contains a checkboxcontainer to remove the top margin */
.theme_checkbox_formlayoutitem {
    margin-top: 0 !important;
}

/* spinedit 100% width */
.theme_inputspinedit_fullwidth {
    width: 100%;
    height: 32px;
    padding: 0;
    font-size: 16px;
    background-color: white;
    border-style: none;
}

/* makes the Clear button hover background color Gray instead of Orange */
    .theme_inputspinedit_fullwidth .dxbl-edit-btn-clear:hover {
        background-color: var(--site-namedcolor-coolgray-200) !important;
    }

/* input listbox 100% width */
.theme_inputlistbox_fullwidth {
    width: 100%;
    height: 32px;
    padding: 0;
    font-size: 16px;
    background-color: white;
    border-style: none;
}

/* form layout caption style */
.theme_formlayout_caption {
    font-size: 12px;
    color: #8E8E8E;
}

/* link style */
.theme_link {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--site-text-color);
}

/* form layout caption style */
.theme_formlayout_nomargin {
    margin-top: 0 !important;
}

/* input date 100% width */
.theme_inputdate_fullwidth {
    width: 100%;
    height: 32px;
    padding: 0;
    font-size: 16px;
    background-color: white;
    border-style: none;
}

/* makes the Clear button hover background color Gray instead of Orange */
    .theme_inputdate_fullwidth .dxbl-edit-btn-clear:hover {
        background-color: var(--site-namedcolor-coolgray-200) !important;
    }

/* input time 100% width */
.theme_inputtime_fullwidth {
    width: 100%;
    height: 32px;
    padding: 0;
    font-size: 16px;
    background-color: white;
    border-style: none;
}

/* makes the Clear button hover background color Gray instead of Orange */
    .theme_inputtime_fullwidth .dxbl-edit-btn-clear:hover {
        background-color: var(--site-namedcolor-coolgray-200) !important;
    }

/* input memo 100% width */
.theme_inputmemo_fullwidth {
    width: 100%;
    height: 300px;
    padding: 0;
    font-size: 16px;
    background-color: white;
    border-style: none;
}

/* button style */

/* pure css ripple effect https://codepen.io/finnhvman/pen/jLXKJw */
.theme_button {
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: white;
    background-color: var(--site-accent-color);
    border-style: none;
    height: 42px;
    border: none;
    border-radius: 5px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 4px #999;
    outline: none;
    background-position: center;
    transition: background 0.8s;
}

    /* these would work for a regular <button> element */
    .theme_button:hover:not(.dxbl-disabled):not(:disabled) {
        background: var(--site-accent-color-hover) radial-gradient(circle, transparent 1%, var(--site-accent-color-hover) 1%) center/15000%;
    }

    .theme_button:hover:disabled {
        cursor: unset;
    }

    .theme_button:active:not(.dxbl-disabled):not(:disabled) {
        background-color: var(--site-accent-color-ripple);
        background-size: 100%;
        transition: background 0s;
    }

/* these are needed for the DxButton element, otherwise they override the theme_button settings */
.dxbl-btn:not(.dxbl-disabled):not(:disabled):not(.dxbl-menu-dropdown-item):not(.dxbl-btn-link):hover {
    background: var(--site-accent-color-hover) radial-gradient(circle, transparent 1%, var(--site-accent-color-hover) 1%) center/15000%;
}

.dxbl-btn:not(.dxbl-disabled):not(:disabled):not(.dxbl-menu-dropdown-item):active {
    background-color: var(--site-accent-color-ripple);
    background-size: 100%;
    transition: background 0s;
}

.theme_button_secondary {
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--site-namedcolor-coolgray-800);
    background-color: var(--site-secondary-color-background);
    border-style: none;
    height: 42px;
    border: none;
    border-radius: 5px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    background-position: center;
    transition: background 0.8s;
}

    /* these would work for a regular <button> element */
    .theme_button_secondary:hover {
        background: var(--site-secondary-color-hover) radial-gradient(circle, transparent 1%, var(--site-secondary-color-hover) 1%) center/15000% !important;
    }

    .theme_button_secondary:active {
        background-color: var(--site-secondary-color-ripple) !important;
        background-size: 100%;
        transition: background 0s;
    }

/* these are needed for the DxButton element, otherwise they override the theme_button settings */
.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover {
    background: var(--site-secondary-color-hover) radial-gradient(circle, transparent 1%, var(--site-secondary-color-hover) 1%) center/15000%;
}

.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):active {
    background-color: var(--site-secondary-color-ripple);
    background-size: 100%;
    transition: background 0s;
}

/* static label 100% width */
.theme_staticlabel_fullwidth {
    width: 100%;
    height: 32px;
    padding-top: 4px;
    padding-left: 8px;
    font-size: 16px;
    background-color: transparent;
    border-style: none;
}

/* red delete button */
.delete_button {
    background-color: var(--site-error-color-600);
}

    .delete_button:hover {
        background: var(--site-error-color-500) radial-gradient(circle, transparent 1%, var(--site-error-color-500) 1%) center/15000% !important;
    }

    .delete_button:active {
        background-color: var(--site-error-color-300) !important;
    }

/* yellow button */
.yellow_button {
    background-color: var(--site-yellow-color-600);
}

    .yellow_button:hover {
        background: var(--site-yellow-color-500) radial-gradient(circle, transparent 1%, var(--site-yellow-color-500) 1%) center/15000% !important;
    }

    .yellow_button:active {
        background-color: var(--site-yellow-color-300) !important;
    }

/* purple button */
.purple_button {
    background-color: var(--site-purple-color-600);
}

    .purple_button:hover {
        background: var(--site-purple-color-500) radial-gradient(circle, transparent 1%, var(--site-purple-color-500) 1%) center/15000% !important;
    }

    .purple_button:active {
        background-color: var(--site-purple-color-300) !important;
    }

/***********************/
/* grid styles */

/* header */

/* header row style */
.theme_grid_header_style {
    height: 44px;
    background-color: var(--site-namedcolor-coolgray-50) !important;
    border: none !important;
}

/* header cell style */
.theme_grid_header_cell_style {
    padding-left: 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: var(--site-namedcolor-coolgray-800) !important;
    background-size: 3px;
    background-repeat: no-repeat;
    background-position: left;
    background-image: url(/images/grid/HeaderSeparator.png);
}

/* fix header cell style (command button fixed to the right side of the grid) */
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell)::before {
    background-color: var(--site-namedcolor-coolgray-400) !important;
}

/* data row style */

/* alternating row style */
.theme_grid_alternatingrow_style table tbody tr:nth-child(even) {
    background-color: var(--site-namedcolor-coolgray-50);
}

/* fixed data cell (command button) background */
.dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-fixed-cell {
    background: unset;
}

/* data row sizes */

/* default cell style */
.theme_grid_row_cell_style {
    padding-left: 14px !important;
}

/* row heights - comfortable */
.theme_grid_row_comfortable_style {
    height: 60px;
}

/* row heights - dense */
.theme_grid_row_dense_style {
    height: 44px;
}

/* row heights - tight */
.theme_grid_row_tight_style {
    height: 30px;
}

/* data cell vertical line */
.theme_grid_row_noverticalines_style td {
    border-left-width: 0px !important;
}

/* data row font sizes */

/* standard */
.theme_grid_row_font_standard_style,
.theme_grid_row_font_standard_style td {
    font-size: 12px !important;
}

/* medium */
.theme_grid_row_font_medium_style,
.theme_grid_row_font_medium_style td {
    font-size: 13px !important;
}

/* large */
.theme_grid_row_font_large_style,
.theme_grid_row_font_large_style td {
    font-size: 16px !important;
}

/* extra large */
.theme_grid_row_font_extralarge_style,
.theme_grid_row_font_extralarge_style td {
    font-size: 20px !important;
}

/* pager styles */

/* turn off the button borders */
.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary {
    border-style: none !important;
}

    /* make the active button a circle instead of a square */
    .dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
        border-radius: 50% !important;
        margin: 0 !important;
    }

/* turn off the borders for the page size selector */
.dxbl-pager-container > .dxbl-pager-page-size-selector > .dxbl-text-edit {
    border-style: none !important;
}

/* Loading Panel shaded background */
.dxbl-loading-panel .dxbl-loading-panel-container.dxbl-loading-panel-shading {
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-radius: 5px;
}

/* turn off the Detail button for a grid */
.hideDetailButton .dxbl-grid-expand-button-cell .dxbl-grid-expand-button {
    visibility: hidden;
}

/* distribution button icon */
.distribute_button {
    background-color: transparent !important;
    height: 20px !important;
    width: 20px;
    padding: 0 !important;
    margin-top: 4px !important;
}

/* distribution button icon */
.distribute_button_icon {
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/images/grid/Distribute_Dark.svg);
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    filter: var(--site-accent-color-filter);
}

/* wizard styles */
.wizard_header_text {
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 12px;
}

.wizard_subheader_text {
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 12px;
    border-bottom: 1px solid silver;
    width: 1100px;
}