espocrm-base/frontend/less/espo/elements/form.less

.form-control {
    border-radius: var(--border-radius);
    border: var(--input-border-width) solid var(--input-border);

    &.radius-right {
        border-top-right-radius: var(--border-radius) !important;
        border-bottom-right-radius: var(--border-radius) !important;
    }

    &.radius-left {
        border-top-left-radius: var(--border-radius) !important;
        border-bottom-left-radius: var(--border-radius) !important;
    }

    box-shadow: var(--input-box-shadow);
    .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
    .form-control-focus-espo();
}

.selectize-input {
    border: var(--input-border-width) solid var(--input-border);
    border-radius: var(--border-radius);
    box-shadow: var(--input-box-shadow);

    &.focus {
        border-color: var(--input-border-focus);
    }

    .form-control-focus-espo();

    &.dropdown-active {
        border-color: var(--input-border-focus);
        border-radius: var(--border-radius);
    }

    .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
}

.note-editor.note-frame {
    border: var(--input-border-width) solid var(--input-border);
    border-width: var(--input-border-width);
    border-radius: var(--border-radius);

    &.in-focus {
        border-color: var(--input-border-focus);
        outline: 0;
        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--input-border-focus-rgba)");
    }

    .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
}

.input-group > .input-group-btn:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-btn:last-child > .form-control:last-child {
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
}

.input-group > .input-group-item {
    position: relative;
    display: table-cell;
    vertical-align: middle;

    + .input-group-item {
        > .selectize-control {
            > .selectize-input {
                margin-left: -1px;
            }
        }
    }

    + input.form-control {
        margin-left: -1px;
    }

    &.input-group-item-middle {
        > input {
            margin-left: -2px;
            right: -1px;
            width: calc(100% + 1px);
        }
    }
}

.input-group > .input-group-item,
.input-group {
    > .selectize-control {
        position: unset;

        > .selectize-input {
            border-radius: 0;
            float: left;

            &.focus {
                z-index: 4;
            }
        }

        &.radius-right {
            > .selectize-input {
                border-top-right-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
            }
        }

        &.radius-left {
            > .selectize-input {
                border-top-left-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);
            }
        }
    }
}

.link-container:not(:empty) + div,
.link-container:not(:empty) + div > div.input-group {
    > .form-control,
    > .btn,
    > .input-group-btn > .btn {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
}

.link-container:not(:empty) + .form-control {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.input-group > .input-group-btn:first-child > select.form-control:first-child {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.input-group > .input-group-btn.hidden:first-child + .form-control {
    border-top-left-radius: var(--border-radius) !important;
    border-bottom-left-radius: var(--border-radius) !important;
}

.input-group-btn > select.form-control {
    position: relative;
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin-right: -1px;
}

.input-group-btn:last-child > select.form-control {
    margin-right: 0;
    margin-left: -1px;
}

.input-group > .middle-element {
    margin-left: 0 !important;
}

.input-group .form-control {
    z-index: unset;

    &:focus {
        z-index: 3;
    }
}

.has-error {
    .input-group .form-control {
        z-index: 3;
    }
}

.input-group-container-2 {
    width: ~"calc(100% + 1px)";

    > div {
        width: 50%;
        float: left;

        &:first-child:not(:has(+ div > .hidden)) {
            //padding-right: 3px;
            > .input-group-btn:last-child > {
                > .btn {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
            }
        }

        &:last-child {
            > input {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            //padding-left: 3px;
            margin-left: -1px;
        }
    }

    &:after {
        clear: both;
        content: " ";
        display: block;
    }
}

.input-group.input-group-dt {
    display: block;

    input.form-control {
        display: inline-block;
        width: calc(50% - 35px);
        float: left;
    }

    .input-group-btn {
        display: inline-block;
        width: 36px;
        float: left;
    }

    &:after {
        clear: both;
        content: " ";
        display: block;
    }
}

.input-group .input-group-btn .btn-sm {
    height: 30px;
}

.input-group-addon {
    background-color: var(--select-item-bg);
    color: var(--select-item-text-color);
}

.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child):not(.no-margin-shifting) {
    margin-left: -1px;
}

.input-group > .input-group-btn > .btn:hover,
.input-group > .input-group-btn > .btn:focus,
.input-group > .input-group-btn > .btn.active {
    z-index: 3;
}

.form-group.col-sm-12 > .field .input-group > .input-group-btn > select {
    max-width: 400px;
}

.form-group > .field .input-group > .input-group-btn > select {
    max-width: 240px;
}

.form-group.col-sm-12 > .field .input-group-link-parent.input-group > .input-group-btn > select {
    max-width: 220px;
}

.form-group.col-sm-3 > .field .input-group-link-parent.input-group > .input-group-btn > select {
    max-width: 100px;
}

.form-group.col-sm-4 > .field .input-group-link-parent.input-group > .input-group-btn > select {
    max-width: 120px;
}

.form-group > .field .input-group-link-parent.input-group > .input-group-btn > select {
    max-width: 180px;
}

.list-group + .form-control {
    position: relative;
}

select[multiple].input-sm {
    height: 90px !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    color: var(--input-color-disabled);
}


.form-inline .form-control {
    @media screen and (max-width: (@screen-sm-min - 1px)) {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

label {
    > input[type="checkbox"].form-checkbox {
        float: left;
        margin-right: 7px;
    }

    &.text-large {
        > input[type="checkbox"].form-checkbox {
            margin-top: 3px;
        }
    }
}

input[type="checkbox"].form-checkbox {
    appearance: none;
    background-color: var(--input-bg);
    margin: 0;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
    height: @line-height-computed;
    width: @line-height-computed;
    display: grid;
    place-content: center;
    cursor: pointer;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 15px;

    &.form-checkbox-simple {
        border-width: 0;
    }

    &.form-checkbox-small {
        height: 15px;
        width: 15px;
        border-radius: var(--border-radius-small);

        &::before {
            font-size: 12px;
        }
    }

    &:checked {
        border-color: var(--btn-primary-border);
        background-color: var(--btn-primary-bg);
        &::before {
            background-color: transparent;
            color: var(--btn-primary-color);
            content: "\f00c";
        }
    }

    &:disabled {
        cursor: default;
        border-color: var(--input-border);
        background-color: transparent;

        &:checked::before {
            background-color: transparent;
            color: var(--gray-soft);
        }

        &:not(.form-checkbox-simple) {
            border-color: var(--input-border);
            background-color: transparent;

            &:checked::before {
                background-color: transparent;
                color: var(--gray-soft);
            }
        }
    }
}

label > input[type="radio"].form-radio {
    float: left;
    margin-right: 6px;

    &.form-radio-small {
        margin-right: 5px;
    }
}

input[type="radio"].form-radio {
    appearance: none;
    background-color: var(--input-bg);
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--input-border);
    height: @line-height-computed;
    width: @line-height-computed;
    display: grid;
    place-content: center;
    cursor: pointer;
    font-weight: 900;

    &:checked {
        border-color: var(--btn-primary-border);
        background-color: var(--btn-primary-bg);
        &::before {
            background-color: var(--btn-primary-color);
            content: "";
            width: 9px;
            height: 9px;
            border-radius: 50%;
        }
    }

    &.form-radio-small {
        height: 15px;
        width: 15px;

        &::before {
            width: 7px;
            height: 7px;
        }
    }

    &:disabled {
        cursor: default;
        border-color: var(--input-border);
        background-color: transparent;

        &:checked::before {
            color: var(--gray-soft);
            background-color: var(--gray-soft);
        }
    }
}

.input-group-addon {
    padding: 6px 10px;
    line-height: 1.5;

    &.radius-left {
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
    }
    &.radius-right {
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
}

.input-group.input-daterange {
    input:first-child {
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);

        text-align: left;
    }

    input:last-child {
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);

        text-align: left;
    }
}