.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--primary-green) !important;
    border-color: var(--primary-green) !important;
}

.form-check-input {
    cursor: pointer;
    box-shadow: none !important;
    border-color: var(--grey-15);
    width: 14px;
    height: 14px;
}

    .form-check-input:not(:checked):focus {
        border-color: var(--grey-15);
    }

    .form-check-input:focus {
        border-color: var(--primary-green) !important;
    }

.form-switch .form-check-input:not(:checked):focus {
    background-color: white;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}

.dxbl-form-control:focus, textarea:focus {
    box-shadow: none !important;
    border-color: var(--primary-green);
}

.dxbl-toolbar-btn .dropdown-toggle {
    color: var(--primary-green) !important;
}

.dxbl-spin-edit.dxbl-focus-hidden.valid,
.dxbl-dropdown-edit.valid {
    border-width: 0;
    border-color: transparent;
    border-style: solid;
    border-radius: .2rem;
}

    .dxbl-spin-edit.dxbl-focus-hidden.valid.modified,
    .dxbl-dropdown-edit.valid.modified,
    .dxbl-date-edit.valid.modified,
    .dxbl-checkbox.valid.modified .form-check-input {
        border-color: var(--grey-15);
        background-color: transparent;
    }

        .dxbl-spin-edit.valid.modified .form-control,
        dxbl-combobox.valid.modified .form-control,
        .dxbl-date-edit.valid.modified .form-control {
            border-color: transparent;
        }

.input-description {
    font-weight: 400;
}
.input-description.disabled {
    color: var(--grey-15);
}

/*reset to default border for modified and valid fields*/
.valid.modified .dxbl-input-group input:not(:focus).form-control,
.valid.modified .dxbl-input-group textarea:not(:focus).form-control,
.valid.modified .dx-blazor-tagbox.form-control:not(:focus) {
    border-color: var(--grey-15) !important;
}


/*focus state for valid fields*/
.valid.modified .dxbl-input-group input:focus.form-control,
.valid.modified .dxbl-input-group textarea:focus.form-control,
.valid.modified.dxbl-tagbox .form-control.input-group.border-primary {
    border-color: var(--primary-green) !important;
}

/*invalid states*/
.dxbl-textbox.invalid .form-control,
.dxbl-memo.invalid .form-control,
.dxbl-spin-edit.invalid .form-control,
.dxbl-date-time-edit.invalid .form-control,
dxbl-combobox.invalid .form-control,
.dxbl-date-edit.invalid .form-control,
.dx-listbox-scrollable.invalid.form-control,
.dx-listbox-scrollable.invalid .form-control,
.dxbl-listbox.invalid.form-control, .dxbl-listbox.invalid .form-control,
.dxbl-calendar.invalid, .invalid .dxbl-tagbox .form-control {
    border-color: var(--support-darkred) !important;
}

.dxbl-listbox.valid.modified {
    border-color: var(--default-border);
}

/*hover for text from items in multiple selector*/
.dxbl-listbox-item:hover span {
    color: var(--primary-green);
}
/* hover style for not disabled and not selected checkboxes*/
.form-check-input:not(:disabled):not(:checked):hover,
/* hover style for checkboxes from multiple select editor*/
.dxbl-listbox-item:hover .custom-checkbox input:not(:disabled) {
	border-color: var(--primary-green);
	-moz-box-shadow: 0 0 3px var(--primary-green) !important;
	-webkit-box-shadow: 0 0 3px var(--primary-green) !important;
	box-shadow: 0 0 3px var(--primary-green) !important;
}

.disabled-radio .option-input {
    cursor: default !important;
}

button {
    outline: none !important;
    box-shadow: none !important;
}

dxbl-combobox input {
    background-color: white !important;
}

dxbl-form-layout-item dxbl-combobox {
	width: 100%;
}

/* DROPDOWNS */
.dxbl-toolbar-btn > .dropdown-toggle:not(.dropdown-toggle-split)::after, .dxbl-toolbar .dxbl-ta-ag > .dropdown-toggle::after {
	margin-left: 0;
}

.dxbl-dropdown-area.dropdown-menu, .dropdown-menu {
    margin: 0 !important;
}

.page-link,
.page-item {
    cursor: pointer !important;
    color: var(--grey-85) !important;
    outline: none !important;
    box-shadow: none !important;
}

.dropdown-item:hover,
.dropdown-item:active,
.dropdown-item.focused,
.dropdown-item.focused:hover {
    background-color: var(--grey-5) !important;
    color: var(--primary-green) !important;
}

.disabled-checkbox {
    cursor: default;
}

    .disabled-checkbox label, 
	.disabled-checkbox div {
        opacity: 0.5;
    }

.disabled-radio {
    cursor: default;
}

    .disabled-radio label:before {
        opacity: 0.5;
    }

/* list box */

/* custom radio button*/
.option-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 5px;
    right: 0;
    bottom: 0;
    left: 10px;
    transition: all 0.15s ease-out 0s;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    outline: none;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    border: solid 1px var(--grey-15);
}

    .option-input:hover {
        border: 1px solid var(--primary-green) !important;
        -moz-box-shadow: 0 0 3px var(--primary-green) !important;
        -webkit-box-shadow: 0 0 3px var(--primary-green) !important;
        box-shadow: 0 0 3px var(--primary-green) !important;
    }

    .option-input:checked {
        background: var(--primary-green);
    }

.disabled .option-input:hover:not(:checked) {
    background: none !important;
    cursor: default;
}

.option-input:checked::before {
    height: 15px;
    width: 15px;
    position: absolute;
    top: 2px;
    left: 1px;
    content: "\e836";
    font-family: "Material icons";
    display: inline-block;
    font-size: 16px;
    text-align: center;
    line-height: 15px
}

.option-input:checked::after {
    -webkit-animation: click-wave 0.25s;
    -moz-animation: click-wave 0.25s;
    animation: click-wave 0.25s;
    background: var(--primary-green);
    content: '';
    display: block;
    position: relative;
    z-index: 100
}

.option-input.radio {
	border-radius: 50%;
	min-width: 20px;
}

    .option-input.radio::after {
        border-radius: 50%
    }

.disabled .option-input {
    opacity: 50%;
}

.radio.valid.modified {
    outline: none;
}

.invalid-spin-edit {
    border: 0.5px solid var(--support-darkred) !important;
}

    .invalid-spin-edit .dxbl-form-control:focus {
        border: 0 !important;
    }

/*invalid dropdown value, empty or value not from the list*/
.invalid-dropdown {
    border: 0.5px solid var(--support-darkred) !important;
}

    .invalid-dropdown .dxbl-form-control:focus {
        border: 0 !important;
    }

.validation-message.valid-error-message {
    display: none;
}

.validation-message.invalid-error-message {
    display: block;
}

.global-doc-format-dropdown .input-group {
    margin-top: 2px;
}

.input-multiple-list input[type="text"] {
    height: 31px !important;
    min-height: auto;
}

.input-multiple-list.large input[type="text"] {
    height: 34px !important;
    min-height: auto;
}

.dxbl-input-group-prepend {
    display: none !important;
}

.clickable-element {
    max-height: 30px;
}

    .clickable-element input {
        cursor: pointer;
    }

.attach-file-input {
    padding-right: 10% !important;
}

.event-template-form.edit-form input[type="text"] {
	height: 32px !important;
}

/*fix for Checkbox size after update to DevExpress 22.1.4*/
.dxbl-checkbox .custom-control > .custom-control-input {
	width: 14px;
	height: 14px;
	margin-top: 4px;
}

.form-switch .form-check-input {
	width: 2em!important;
}

.dxbl-checkbox .dxbl-checkbox-label.dxbl-checkbox-label-right {
	padding-left: unset !important; 
}
.dxbl-checkbox.form-switch.valid.modified .form-check-input {
	border-color: var(--grey-15);
	background-color: transparent;
}
.dxbl-checkbox.form-switch.valid.modified .form-check-input:focus {
	border-color: var(--grey-15);
	background-color: transparent;
}

.dropdown-without-arrow dxbl-button-edit-input-group div:last-child {
	display: none !important;
}

/*set padding-right to be the same as padding-left for inputs*/
dxbl-combobox:not(.dxbl-edit-clbv) input.form-control, 
.dxbl-date-edit:not(.dxbl-edit-clbv) input.form-control, 
div.dxbl-spin-edit:not(.dxbl-edit-clbv) input.form-control {
	padding-right: 0.5rem !important;
}

/* Extends the dropdown height */
.combobox-tall-dropdown {
	max-height: 500px !important;
}

.combobox-tall-dropdown .dxbs-listbox {
	max-height: 500px !important;
}

.locations-combobox-tall-dropdown {
	max-height: 700px !important;
}

.locations-combobox-tall-dropdown .dxbl-listbox {
	max-height: 700px !important;
}