:root {
    --input-height: 42px;
    --wide-input-width: 292px;
}

/* form & inputs */
.ui.input.wide, .ui.dropdown.wide {
    width: var(--wide-input-width) !important;
}

.ui.dropdown.transparent {
    background-color: transparent !important;
}

.ui.input, .ui.calendar, .ui.dropdown {
    font-size: 14px !important;
}

.ui.input.extra.wide, .ui.dropdown.extra.wide {
    min-width: calc(var(--wide-input-width)*1.5) !important;
}

.ui.input:not(.unrestricted-height), .ui.dropdown:not(.unrestricted-height), .ui.dropdown:not(.unrestricted-height) .dropdown.icon, .ui.dropdown:not(.unrestricted-height) input, .ui.input > .ui.label {
    height: var(--input-height) !important;
}

    .ui.dropdown:not(.loading, .unrestricted-height) .dropdown.icon, .ui.dropdown:not(.unrestricted-height) .remove.icon {
        height: calc(var(--input-height)/2) !important;
        top: calc((var(--input-height) - 24px)/2) !important;
    }

.ui.dropdown.unrestricted-height .dropdown.icon, .ui.dropdown.unrestricted-height .remove.icon {
    height: 22px !important;
    top: 7px !important;
}

.ui.dropdown:not(.loading) .dropdown.icon, .ui.dropdown .remove.icon {
    width: calc(var(--input-height)/2) !important;
    border-radius: calc(var(--input-height)/4);
    background-color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    font-size: 14px !important;
    padding: 12px !important;
}

    .ui.dropdown .remove.icon::before {
        font-size: 10px !important;
    }

.ui.input:not(.right.action, .left.labeled, .material, .right.labeled, .left.action) input, .ui.dropdown {
    border-radius: var(--border-radius) !important;
}

.ui.dropdown .text, .ui.input > .ui.label, .ui.calendar .text {
    line-height: calc(var(--input-height)/2);
}

.ui.input.right.action input {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.ui.input.labeled.right.left input{
    border-radius: 0 !important;
}

.ui.input.left.labeled input, .ui.input.labeled:not(.right):not(:has(.hidden.label)) input  {
    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}

.ui.input.right.labeled input {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.ui.input.right.action:not(.left) .ui.button, .ui.input.right.labeled:not(.left) .ui.label {
    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}

.ui.input.action:not(.right) .ui.button, .ui.input.labeled:not(.right) .ui.label {
    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}

.ui.input.left.labeled .ui.label {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.ui.input input, .ui.dropdown, .ui.calendar input {
    border: none !important;
    background-color: var(--light-grey-color) !important;
}

    .ui.dropdown .text, .ui.calendar input {
        color: black !important;
    }

    .ui.input.white input, .ui.dropdown.white {
        background-color: white !important;
    }

    .ui.input input::placeholder, .ui.dropdown .text.default, .ui.calendar input::placeholder {
        color: var(--dark-grey-color) !important;
        font-size: 14px !important;
    }

.ui.input.action .ui.button {
    border-style: none;
    border-width: 0;
}

.ui.form .field .prompt.label::before {
    border-width: 0 !important;
}

.field label {
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

.field .input.material input, .field .dropdown.material, .field .calendar.material {
    border: none !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-radius: 0 !important;
    border-bottom-color: var(--bottom-input-border-color) !important;
}

.field textarea {
    border: none !important;
}

.field.error label {
    color: var(--failure-color) !important;
}

.field.error input, .field.error .search.dropdown, .field.error textarea {
    border-bottom-color: var(--failure-color) !important;
}

    .field.error .search.dropdown .menu .item, .field.error .search.dropdown .text {
        background: transparent !important;
    }

.field.error .red.pointing.label {
    margin-top: 6px !important;
    padding-left: 0 !important;
    border: none !important;
}

    .field.error .red.pointing.label:before {
        content: none;
    }

.dropdown.menu, .dropdown .menu {
    border-color: var(--inactive-color) !important;
}

form .column > .field {
    margin-top: 8px !important;
}

div.checked .ui.checkbox label:after {
    background: #000000 !important;
}

.ui.basic.red.pointing.prompt.label {
    color: var(--failure-color) !important;
    font-weight: 400;
}

.ui.form .field.error .input.material input {
    background-color: white !important;
    border-color: var(--failure-color) !important;
    border-width: 1px !important;
}

.field textarea {
    background-color: var(--inactive-color) !important;
    resize: none !important;
}

    .field textarea::placeholder, .field textarea .default.text {
        color: var(--dark-inactive-color) !important;
    }

.field.error .dropdown input.search {
    background-color: transparent !important;
}