:root {
    --input-width-unit: 6em;
}

/* Main form */

.cForm {
    padding: 0 0 2em 0;
}

.cForm input,
.cForm button,
.cForm select {
    vertical-align: top;
}

/* Each row */

.cForm_row {
    -moz-border-radius: .5em;
    border-radius: .5em;
    padding: .5em .2em;
    white-space: nowrap;
}

.cForm_row:hover {
    background-color: #EEF6FB;
}

/* Used to highlight form rows with focus. */
.formFocused {
    background-color: #DEEDF7;
}

/* Row content (general) */

.cForm_row label {
    display: inline-block;
    font-weight: normal;
    padding: .2em .5em 0 0;
    text-align: right;
    vertical-align: top;
    white-space: normal;
    width: calc(var(--input-width-unit) * 2);
}

/* Action row (submit buttons) */

.cForm_action {
    padding: .2em 0 0 calc(var(--input-width-unit) * 2 + 0.75em);
}

.cForm_action button {
    margin: 0 .5em 0 0;
    min-height: 3em;
    min-width: calc(var(--input-width-unit) * 1.5);
    padding: .1em .4em;
}

/* Error messages */

.cForm_error {
    background-image: url(../images/Error.png);
    background-position: 0px 3px;
    background-repeat: no-repeat;
    clear: left;
    color: #ff0000;
    direction: ltr;
    margin: 0 0 .3em calc(var(--input-width-unit) * 2 + 0.5em);
    padding: .2em 0 .2em 1.5em;
}

/* Manditory fields */

.cform_required {
    background-image: url(../images/Required.png);
    background-position: top left;
    background-repeat: no-repeat;
}

/* Sizing (general) */

.cForm_size_us {
    width: auto;
}

.cForm_size_xxs {
    width: calc(var(--input-width-unit) / 2);
}

.cForm_size_xs {
    width: var(--input-width-unit);
}

.cForm_size_s {
    width: calc(var(--input-width-unit) * 2);
}

.cForm_size_m {
    width: calc(var(--input-width-unit) * 4);
}

.cForm_size_l {
    width: calc(var(--input-width-unit) * 6);
}

.cForm_size_xl {
    width: calc(var(--input-width-unit) * 8);
}

.cForm_size_xxl {
    width: calc(var(--input-width-unit) * 10);
}

/* cInput styles */

/* Headers */

.cInput_displayHeader_wrapper label {
    display: none;
}

.cInput_displayHeader {
    font-size: 1.5em;
    font-weight: normal;
    margin-bottom: .5em;
    width: 100% !important;
}


/* Check box */

.cInput_checkbox_wrapper {
    direction: rtl;
    text-align: left;
}

.cInput_checkbox_wrapper label {
    direction: ltr;
    font-weight: normal;
    margin: 0 0 0 .2em;
    text-align: left;
    width: auto;
}

.cInput_checkbox_wrapper .cInput_checkbox {
    margin-left: calc(var(--input-width-unit) * 2 + 0.5em);
}

.cInput_checkbox {
    margin-top: .3em;
    vertical-align: middle;
}

/* Check list */

.cInput_checklist {
    display: inline-block;
    list-style: none;
}

.cInput_checklist li {
    margin: 0 0 .3em 0;
}

.cForm_row .cInput_checkbox_label {
    font-weight: normal;
    margin: 0 0 0 .2em;
    text-align: left;
    width: auto;
}

.cInput_checklist_checkall {
    border-right: .1em solid #3F4043;
    display: inline-block;
    margin-top: 0.5em;
    padding: 0 .5em 0 0;
}

.cInput_checklist_uncheckall {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0 0 0 .5em;
}

.cInput_colour {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* date */

.cInput_date {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* datetime */

.cInput_datetime {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

.cInput_dateMonthYear {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* display (general) */
.cInput_display {
    /* border-bottom: .1em dotted #3F4043; */
    display: inline-block;
    min-height: 1.5em;
    padding: .2em;
}

/* displayImage */

.cInput_displayImage_image {
    min-height: 1.5em;
    width: 100%;
}

/* displayNote */

.cInput_displayNote {
    min-height: 1.5em;
    padding-bottom: 1em;
    padding-top: 1em;
}

/* displayState */

.cInput_displayState_wrapper {
    direction: rtl;
    text-align: left;
}

.cInput_displayState_wrapper label {
    direction: ltr;
    font-weight: normal;
    margin: 0 0 0 .2em;
    text-align: left;
    width: auto;
}

.cInput_displayState {
    background-position: center center;
    background-repeat: no-repeat;
    border-bottom: none;
    display: inline-block;
    height: 16px;
    margin: 0 .2em 0 calc(var(--input-width-unit) * 2 + 0.5em);
    overflow: hidden;
    text-indent: 99999px;
    width: 16px;
}

.cInput_state_check {
    background-image: url(../images/State_On.png);
}

.cInput_state_uncheck {
    background-image: url(../images/State_Off.png);
}

.cInput_state_folder {
    background-image: url(../images/State_Folder.png);
}

.cInput_state_document {
    background-image: url(../images/State_Document.png);
}

.cInput_state_unknown {
    background-image: url(../images/State_Unknown.png);
}

.cInput_multi_element .cInput_displayState {
    margin-left: 0;
}

/* displayTextMultiLang */

.cInput_displayTextMultiLang_languages {
    display: inline-flex;
    flex-direction: column;
    list-style: none;
    gap: 0.5em;
}

.cInput_displayTextMultiLang_languages li {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2em;
}

.cInput_displayTextMultiLang_languageName {
    font-size: 0.9em;
    font-weight: normal;
}

.cInput_displayTextMultiLang_language {
    min-height: 1em;
}

/* displayTextArea */

.cInput_displayTextArea {
    display: inline-block;
}

/* displayTextHtml */

.cInput_displayTextHtml {
    display: inline-block;
    min-height: 1.5em;
}

/* displayTextRich */

.cInput_displayTextRich {
    border: .1em dotted #3F4043;
    min-height: 1.5em;
}

.cInput_displayTextRich iFrame {
    background-color: white;
    border: .1em solid #3F4043;
    min-height: 1.5em;
}


/* displayWarning */

.cInput_displayWarning {
    min-height: 1.5em;
    padding-bottom: 1em;
    padding-top: 1em;
    white-space: normal;
}

/* dropdown */

.cInput_dropdown {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* file */

.cInput_file_remove {
    margin: 0 0 0 calc(0.4em - var(--input-width-unit));
    min-width: 6em;
}

/* fileImage */

.cInput_fileImage_remove {
    margin: 0 0 0 calc(0.4em - var(--input-width-unit));
    min-width: 6em;
}

.cInput_fileImage_preview {
    background-color: white;
    border: .1em solid #3F4043;
    margin-left: 12.5em;
    padding: .2em;
    width: calc(var(--input-width-unit) * 2);
    height: calc(var(--input-width-unit) * 2);
}

.cInput_fileImage_image {
    max-height: 100%;
    max-width: 100%;
}

/* filePreview */

.cInput_filePreview_remove {
    margin: 0 0 0 calc(0.4em - var(--input-width-unit));
    min-width: 6em;
}

.cInput_filePreview_preview {
    margin-left: calc(var(--input-width-unit) * 2 + 0.75em);
    padding: .2em;
}

/* float */

.cInput_float {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* int */

.cInput_int {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* password */

.cInput_password {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* radiolist */

.cInput_radiolist {
    display: inline-block;
    list-style: none;
}

.cInput_radiolist li {
    margin: 0 0 .3em 0;
}

.cForm_row .cInput_radiobox_label {
    font-weight: normal;
    margin: 0 0 0 .2em;
    text-align: left;
    width: auto;
}

/* selectbox */

.cInput_selectBox {
    border: .1em solid #3F4043;
    height: 15em;
    min-height: 1.5em;
    padding: .2em;
    white-space: normal;
}

.cInput_selectBox:focus option,
.cInput_selectBox:hover option {
    display: inline-block;
}

.cInput_selectBox option:checked {
    color: white;
    display: inline-block;
}

.cInput_selectBox option {
    display: none;
    margin: 0.25em;
    outline: 1px solid #3F4043;
    padding: 0.5em;
}


.cInput_selectBox_wrapper ul {
    list-style: none;
    margin-left: calc(var(--input-width-unit) * 2 + 0.75em);
}

.cInput_selectBox_selectall {
    border-right: .1em solid #3F4043;
    display: inline-block;
    margin-top: 0.5em;
    padding: 0 .5em 0 0;
}

.cInput_selectBox_unselectall {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0 0 0 .5em;
}

/* email */

.cInput_email {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* phone */

.cInput_phone {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* text */

.cInput_text {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* multi lang text */

.cInput_textMultiLang_actual {
    display: none;
}

.cInput_textMultiLang_languages {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5em;
    list-style: none;
}

.cInput_textMultiLang_languages li {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2em;
}

.cInput_textMultiLang_languageName {
    font-size: 0.9em;
    font-weight: normal;
}

.cInput_textMultiLang_language {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* mask text */

.cInput_textMask {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

.cInput_textMask_toggle {
    display: block;
    margin: 0 0 0 calc(var(--input-width-unit) * 2 + 0.5em);
    padding: .2em;
    text-align: left;
    width: var(--input-width-unit);
}

.cInput_displayTextMask_toggle {
    display: block;
    padding: .2em;
    text-align: left;
    width: var(--input-width-unit);
}

/* textArea */

.cInput_textArea {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

.cInput_textArea.cForm_size_xxs {
    height: calc(var(--input-width-unit) / 2);
}

.cInput_textArea.cForm_size_xs {
    height: calc(var(--input-width-unit) / 2);
}

.cInput_textArea.cForm_size_s {
    height: var(--input-width-unit);
}

.cInput_textArea.cForm_size_m {
    height: calc(var(--input-width-unit) * 2);
}

.cInput_textArea.cForm_size_l {
    height: calc(var(--input-width-unit) * 4);
}

.cInput_textArea.cForm_size_xl {
    height: calc(var(--input-width-unit) * 6);
}

.cInput_textArea.cForm_size_xxl {
    height: calc(var(--input-width-unit) * 6);
}

/* textRich */

.mce-tinymce {
    display: inline-block !important;
    min-width: calc(var(--input-width-unit) * 6);
}

/* time */

.cInput_time {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* Display list */

.cInput_displayList {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5em;
    list-style: none;
}

.cInput_displayList>li:not(:last-child)::after {
    content: ',';
}

.cInput_displayList>li {
    display: inline-block;
    min-width: inherit;
}

/* Hidden */

.cInput_hidden_wrapper,
.cInput_hidden_wrapper * {
    display: none !important;
}

/* Group Multi Inputs */

.cInput_multi,
.cInput_multiStatic {
    display: inline-block;
    list-style: none;
}

.cInput_multi li,
.cInput_multiStatic li {
    border-bottom: .1em solid #3F4043;
    margin-bottom: .2em;
    padding-bottom: .2em;
    white-space: nowrap;
}

.cInput_multi .cInput_multi_element,
.cInput_multiStatic .cInput_multi_element {
    display: inline-block;
    margin-right: 0.1em;
    vertical-align: top;
}

.cInput_multi .cInput_multi_addRemove {
    display: inline-block;
    vertical-align: bottom;
}

.cInput_multi .cInput_multi_addRemove a {
    display: inline-block;
}

.cInput_multi .cInput_multi_add {
    border-right: .1em solid #3F4043;
    padding: 0 .5em;
}

.cInput_multi .cInput_multi_remove {
    padding: 0 .5em;
}

.cInput_multi .cInput_multi_element label,
.cInput_multiStatic .cInput_multi_element label {
    display: block;
    font-weight: normal;
    height: .1em;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    width: auto;
}

.cInput_multi li:first-child .cInput_multi_element label,
.cInput_multiStatic li:first-child .cInput_multi_element label {
    display: block;
    height: auto;
    text-align: left;
    width: auto;
}

.cInput_multi .cInput_multi_element .cInput_checkbox,
.cInput_multiStatic .cInput_multi_element .cInput_checkbox {
    margin: 0;
}

.cInput__wrapper {
    white-space: nowrap;
}

.cInput__wrapper label,
.cInput__wrapper .cInput_multi {
    white-space: normal;
}

/* The popup drawing and signiture */

.cInput_drawing_popupOverlay {
    background-color: #3F4043;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 200;
}

.cInput_drawing_popupWindow {
    background-color: white;
    border: 0.2rem solid #3F4043;
    box-shadow: 1rem 1rem 2rem 0 #3F4043;
    left: 50%;
    min-height: min(100vh, 30rem);
    min-width: min(100vw, 45rem);
    padding: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    z-index: 201;

    & .cInput_drawing_popupImage {
        display: block;
        margin: 0 auto;
        max-height: max(50px, calc(100vh - 21rem));
        max-width: max(26rem, calc(100vw - 3rem));
    }


    & .cInput_drawing_popupToolbar {
        border-top: 1px solid #3F4043;

        & label {
            display: inline-block;
            padding: 0.3rem;
        }

        & input[type=radio] {
            margin-right: 0.2rem;
            vertical-align: middle;
        }

        & .cInput_drawing_popupToolbar_tools,
        .cInput_drawing_popupToolbar_colours,
        .cInput_drawing_popupToolbar_sizes,
        .cInput_drawing_popupToolbar_menu {
            padding: 1rem;
        }

        & .cInput_drawing_popupToolbar_tools_title,
        .cInput_drawing_popupToolbar_colours_title,
        .cInput_drawing_popupToolbar_sizes_title,
        .cInput_drawing_popupToolbar_menu_title {
            display: inline-block;
            width: 4rem;
        }

        & button {
            padding: 0.5rem;
        }
    }
}

.cInput_signature_popupOverlay {
    background-color: #3F4043;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 200;
}

.cInput_signature_popupWindow {
    background-color: white;
    border: 0.2rem solid #3F4043;
    box-shadow: 1rem 1rem 2rem 0 #3F4043;
    left: 50%;
    min-height: min(100vh, 30rem);
    min-width: min(100vw, 45rem);
    padding: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    z-index: 201;

    & .cInput_signature_popupImage {
        display: block;
        margin: 0 auto;
        max-height: max(50px, calc(100vh - 21rem));
        max-width: max(26rem, calc(100vw - 3rem));
    }

    & .cInput_signature_popupToolbar {
        border-top: 1px solid #3F4043;

        & .cInput_signature_popupToolbar_menu {
            padding: 1rem;
        }

        & .cInput_signature_popupToolbar_menu_title {
            display: inline-block;
            width: 4rem;
        }

        & button {
            padding: 0.5rem;
        }
    }
}

/* displayButton */

.cInput_displayButton {
    min-height: 2em;
    padding: 0.2em 0.5em;
}

/* displayLink variants */

.cInput_displayLink,
.cInput_displayPopupLink,
.cInput_displayImageLink,
.cInput_displayPopupImageLink {
    display: inline-block;
    min-height: 1.5em;
    padding: .2em;

    & img {
        height: stretch;
        width: stretch;
    }
}

/* disabled link variants */

.cInput_displayDisabledLink,
.cInput_displayDisabledImageLink,
.cInput_displayDisabledPopupLink,
.cInput_displayDisabledPopupImageLink {
    color: #888888;
    display: inline-block;
    min-height: 1.5em;
    padding: .2em;

    & img {
        height: stretch;
        width: stretch;
    }
}