/*******************/
/*KENDO CHECK BOXES*/
/*******************/
.phoenix-check-box.k-checkbox,
.phoenix-check-box,
.k-checkbox {
    border-color: var(--checkbox-border);
    background-color: var(--inputfield-background);
    border-radius: 3px;
    flex: 0 0 auto;
    width: 15px !important;
    height: 15px !important;
}

.phoenix-check-box.k-checkbox:disabled,
.phoenix-check-box:disabled,
.k-checkbox:disabled {
    border-color: var(--inputfield-disabled-border);
    background-color: var(--inputfield-background);
    opacity: 1;
}

.phoenix-check-box.k-checkbox:focus:hover:not([disabled]),
.phoenix-check-box:focus:hover:not([disabled]),
.k-checkbox:focus:hover:not([disabled]),
.phoenix-check-box.k-checkbox:hover:not([disabled]),
.phoenix-check-box:hover:not([disabled]),
.k-checkbox:hover:not([disabled]) {
    border-radius: 3px;
    box-shadow: var(--small-shadow);
}

.phoenix-check-box.k-checkbox:focus:hover:disabled,
.phoenix-check-box:focus:hover:disabled,
.k-checkbox:focus:hover:disabled,
.phoenix-check-box.k-checkbox:hover:disabled,
.phoenix-check-box:hover:disabled,
.k-checkbox:hover:disabled {
    opacity: 1;
    filter: none;
    border-color: var(--inputfield-disabled-border);
    color: var(--inputfield-disabled-border);
    background-color: var(--inputfield-background);
}

.phoenix-check-box.k-checkbox:checked,
.phoenix-check-box:checked,
.k-checkbox:checked {
    border-color: var(--checkbox-border);
    background-color: var(--inputfield-background);
}

.phoenix-check-box.k-checkbox:checked,
.phoenix-check-box:checked,
.phoenix-check-box.k-checkbox:checked:focus,
.phoenix-check-box:checked:focus,
.k-checkbox:checked,
.k-checkbox:checked:focus {
    background-color: var(--checkbox-border);
}

.phoenix-check-box.k-checkbox:focus,
.phoenix-check-box.k-checkbox:checked:focus,
.phoenix-check-box:focus,
.phoenix-check-box:checked:focus,
.k-checkbox:focus,
.k-checkbox:checked:focus {
    border-color: var(--checkbox-border);
    box-shadow: none;
}

.phoenix-check-box.k-checkbox:disabled ~ label,
.phoenix-check-box:disabled ~ label,
.k-checkbox:disabled ~ label {
    color: var(--inactive-font);
}

/**********************/
/*STANDARD CHECK BOXES*/
/**********************/
.phoenix-check-box-wrapper {
    display: grid;
    grid-template-columns: [phoenix-check-box] 20px [phoenix-label] auto;
    align-items: center;
    min-height: 30px;
}

.phoenix-check-box-wrapper .phoenix-check-box {
    grid-area: phoenix-check-box
}

.phoenix-check-box-wrapper .phoenix-label {
    grid-area: phoenix-label;
}