﻿/*Base form styling*/
.k-form {
    background-color: #F3F4F5;
    border: 0.5px solid #C5C5C5;
    border-radius: 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 100%;
}

.k-form-layout {
    overflow: auto;
    height: calc(100% - 32px);
    scrollbar-color: gray #F3F4F5 !important;
}

.k-form-layout::-webkit-scrollbar-track {
    background: #F3F4F5 !important;
}

.k-form-buttons {
    background-color: #F3F4F5;
    height: 32px;
    margin-top: 0 !important;
    padding-bottom: 15px !important;
}

.k-window-content > .k-tabstrip > .k-tabstrip-content > .k-form.full-form {
    height: 100% !important;
}

.k-window-content > .content_container > .k-tabstrip > .k-tabstrip-content > .k-form.full-form {
    height: 100% !important;
}

.k-form-field {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin-bottom: 10px;
}

#inventory-grid-form > .k-form > .k-form-layout > .k-form-field {
    width: 20%;
}

.k-form .k-form-legend {
    text-transform: capitalize;
}

.k-form-legend {
    height: 30px;
    padding-top: 0;
    padding-bottom: 15px;
    display: flex;
    justify-content: start;
    align-items: center;
    color: #464c55;
    text-align: left;
    font: normal normal bold 14px/1px Segoe UI;
    letter-spacing: 0.14px;
    color: #464C55;
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none !important;
}

.k-form-fieldset {
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.k-dropdownlist {
    background-color: #FFFFFF !important;
}

.k-picker-solid {
    background-color: #FFFFFF !important;
}

.k-window-content {
    padding: 5px;
}

    .k-window-content:last-child {
        padding: 0px;
    }

.k-form-md .k-form-field {
    margin-top: 0px;
}

.k-form-field > label {
    text-align: start;
    white-space: nowrap;
}

.k-form .k-form-fieldset {
    margin: 20px 10px 0px 10px;
}

.k-form-buttons {
    margin-top: 0px;
    margin-left: 5px;
}

    .k-form-buttons .k-actions-start {
        margin-top: 0px;
        margin-left: 5px;
    }
/*Form Item hover effects*/
.k-input {
    border: 0.5px solid #828585 !important;
}

    .k-input:hover {
        border: 0.5px solid #3b5eda !important;
    }

    .k-input .k-valid:hover {
        border: 0.5px solid #3b5eda !important;
    }

.k-invalid:hover {
    border: 0.5px solid #CB0D0D !important;
}

.error-field > .k-input {
    border: 0.5px solid #CB0D0D !important;
}

    .error-field > .k-input:hover {
        border: 0.5px solid #CB0D0D;
    }

.error-field > .k-picker-solid.k-valid {
    border: 0.5px solid #CB0D0D !important;
}

.error-field > .k-dropdownlist {
    border: 0.5px solid #CB0D0D !important;
}
/*Dropdowns*/
.k-dropdownlist {
    border: 0.5px solid #828585 !important;
    background-color: white !important;
}

.error-field > .k-dropdownlist {
    border: 0.5px solid #CB0D0D !important;
}

.k-dropdownlist.k-picker.k-picker-solid.k-picker-md.k-rounded-md:hover {
    border: 0.5px solid #3b5eda !important;
    background-color: white !important;
}

.k-dropdownlist[aria-expanded="false"] > .k-button > .k-button-icon.k-icon.k-svg-icon svg path {
    d: path("m382.059 158.059-126.06 126.06-126.061-126.06L96 192l159.999 160L416 192z");
    fill: #3B5EDA;
}

.k-dropdownlist[aria-expanded="true"] > .k-button > .k-button-icon.k-icon.k-svg-icon svg path {
    d: path("m129.941 353.941 126.06-126.06 126.061 126.06L416 320 256.001 160 96 320z");
    fill: #3B5EDA;
}

.k-dropdownlist[aria-expanded="true"] {
    border: 0.5px solid #3b5eda !important;
}

.k-popup.k-list-container.k-dropdownlist-popup {
    border: 0.5px solid #3b5eda !important;
    margin-top: 3px;
    border-radius: 4px;
}

    .k-popup.k-list-container.k-dropdownlist-popup > .k-list.k-list-md {
        border-radius: 4px;
    }

        .k-popup.k-list-container.k-dropdownlist-popup > .k-list.k-list-md > .k-list-optionlabel.k-selected.k-focus {
            background-color: #F5F7FF;
            color: #3B5EDA;
        }

            .k-popup.k-list-container.k-dropdownlist-popup > .k-list.k-list-md > .k-list-optionlabel.k-selected.k-focus:hover {
                background-color: #F2F2F2;
                color: #3B5EDA;
            }

.k-list-item.k-selected:hover {
    background-color: #F2F2F2;
}

.k-list-item.k-selected {
    background-color: #F5F7FF;
    color: #3B5EDA;
}
/*Numeric textboxes*/
.k-spinner-increase.k-button > .k-button-icon.k-icon.k-svg-icon.k-svg-i-caret-alt-up svg path {
    d: path("m129.941 353.941 126.06-126.06 126.061 126.06L416 320 256.001 160 96 320z");
    fill: #3B5EDA;
}

.k-spinner-decrease.k-button > .k-button-icon.k-icon.k-svg-icon.k-svg-i-caret-alt-down svg path {
    d: path("m382.059 158.059-126.06 126.06-126.061-126.06L96 192l159.999 160L416 192z");
    fill: #3B5EDA;
}

.k-input-spinner .k-spinner-increase, .k-input-spinner .k-spinner-decrease {
    background-color: white !important;
    border: none;
}
/*Date picker*/
.k-datepicker > .k-button {
    border-radius: 4px;
}
/*Calendar*/
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link {
    background-color: #D7DFF8;
    color: #3B5EDA;
}

.k-calendar .k-calendar-td.k-selected:hover .k-link {
    background-color: #F3F4F5 !important;
    color: #5A5A5A !important;
}
/*Switch*/
.k-switch-off .k-switch-track {
    background-color: white;
}

.k-switch-on .k-switch-track {
    background-color: #3b5eda;
}

.k-switch-label-on, .k-switch-label-off {
    display: none;
}

.k-switch-thumb.k-rounded-full {
    height: 12px !important;
    width: 12px !important;
    background-color: #828585;
}

.k-switch-md .k-switch-track {
    width: 40px !important;
    height: 20px !important;
}

.k-switch-md {
    width: 40px !important;
    height: 20px !important;
}

    .k-switch-md.k-switch-off .k-switch-thumb-wrap {
        left: 10px;
    }

    .k-switch-md.k-switch-on .k-switch-thumb-wrap {
        left: calc(100% - 10px)
    }

.k-switch.k-disabled > .k-switch-thumb-wrap {
    background-color: #9d9d9d;
}

.k-switch.k-switch-on > .k-switch-thumb-wrap .k-rounded-full {
    background-color: white !important;
}
/*Radio buttons*/
.k-radio-list > .k-radio-item > .k-radio:checked {
    border-color: #3b5eda;
    background-color: #3b5eda;
}

.error-field > .k-radio-list > .k-radio-item > .k-radio {
    border: 0.5px solid #CB0D0D !important;
}

.k-radio-list.k-list-horizontal {
    row-gap: 0px;
    column-gap: 8px;
}
/*SF components inside of responsive form*/
.child-content-container .e-valid-input {
    border-color: var(--button-primary-bg) !important;
    box-shadow: none !important;
}

.child-content-container .e-input-focus input {
    border-color: var(--button-primary-bg) !important;
}

.child-content-container .e-input-focus {
    border-color: var(--button-primary-bg) !important;
    box-shadow: none !important;
}

.child-content-container.error-field .e-valid-input {
    border-color: var(--form-error-red) !important;
    box-shadow: none !important;
}

.child-content-container.error-field .e-input-focus input {
    border-color: var(--form-error-red) !important;
}

.child-content-container.error-field .e-input-focus {
    border-color: var(--form-error-red) !important;
    box-shadow: none !important;
}
