/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */
.ccm-page .form-reform-check-with-message {
    display: flex;
}

.ccm-page .form-reform-check-with-message > * {
    display: inline-block;
    vertical-align: top;
}

.ccm-page .form-reform-check-with-message .message-for-form-reform-check-with-message {
    padding-left: 0.5rem;
}

/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */

/*
 * Most of this is taken from ccm-widget-colorpicker styles in the core dashboard theme.
 * then tweaked to work with a bs5 front end theme.
 */

.form-reform-control.form-reform-color-picker .ccm-widget-colorpicker {
    border: 1px solid #ebebeb;
    height: unset;
    padding: 5px;
    width: unset;
    display: block; /* the dashboard would have been inline-block */
    background-color: #e9ecef; /* To match the background and border of prefix/suffix */
    border-color: #ced4da;
    border-radius: 5px;
}

/*
 * Because of the hidden input element, when there is a prefix (input group) our colorpicker is
 * actually the 2nd child, so special cases for the first child of an input group are wrong and
 * we patch them up here.
 *
 * For non-bs themes with other validation styling, this will need a theme specific template
 */
.form-reform-control.form-reform-color-picker > .input-group > :nth-child(2).ccm-widget-colorpicker {
    border-bottom-left-radius: 5px !important;
    border-top-left-radius: 5px !important;
    margin-left: 0 !important;
}

.form-reform-control.form-reform-color-picker .ccm-widget-colorpicker .sp-preview {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    height: 30px;
    margin-right: 15px;
    width: 33px;
}

.form-reform-control.form-reform-color-picker .ccm-widget-colorpicker .sp-dd {
    color: #005163;
    font-size: 12px;
    line-height: 2.6rem;
}

/*
 * The invalid state is hidden with the hidden input, so we add some colour to the overall
 * control.
 * For non-bs themes with other validation styling, this will need a theme specific template
 */
.form-reform-control.form-reform-color-picker.is-invalid {
    color: #a32c0d
}

/*
 * Fix the width of the underlying text input to be the same as the rendered color picker input
 */
.ccm-edit-mode .form-reform-control.form-reform-color-picker input.form-control {
    max-width: 58px;
}