.form-row-holder {
    padding: 60px;
    background-color: white;
}

.inline-rows {
    @include display-flex;
    //@include justify-content(space-between);
    //@include align-items(center);
    .form-row {
        //@include flex(1);
        //max-width:90%;
        padding-right: 12px;
        // .form-input, .select-wrapper {
        // 	width: 90%;
        // }
    }
}

.row-split {
    @include display-flex;
    @include justify-content(space-between);
    .form-row {
        padding: 0 10px;
        //max-width:90%;
    }
}

.date_input, .search_input {
    position: relative;
    &:before {
        content: "\f073";
        position: absolute;
        right: 10px;
        top: 50%;
        @include translateY(-50%);
        display: block;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: $darkBlue;
    }
    .form-input {
        padding-right: 46px;
    }
}

.search_input {
    &:before {
        content: "\f002";
    }
    .form-input {
        height: 45px;
    }
}

.form-row {
    @include display-flex;
    @include flex-direction(column);
    margin-bottom: 16px;
    width: 100%;

    &.invalid {
        .form-label, .form-helper {
            color: $invalidColor;
        }
        .form-input {
            border-color: $invalidColor;
        }
    }

    &.form-submit {
        margin-top: 24px;
    }
}

.form-label {
    color: $textColor;
    font-size: 16px;
    display: block;
    margin: 0 0 5px 0;
    font-weight: 800;

    .label-helper {
        float: right;
        font-weight: 400;
    }
}

.form-helper {
    font-size: 80%;
    display: block;
    margin: 5px 0 7px;
    &.invalid {
        color: $invalidColor;
    }
}

.icon-helper {
    position: relative;
    .icon {
        position: absolute;
        top: 50%;
        z-index: 2;
        color: #999;
        right: 12px;
        @include translateY(-50%);
        cursor: pointer;

        &:hover {
            color: $darkBlue;
        }
    }

    .form-input {
        padding-right: calc(0.75rem + 28px);
    }
}

.form-input {
    display: block;
    width: 100%;
    height: calc(2em + 0.75rem + 4px);
    padding: 0.95rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: $textColor;
    background-color: #E9E9E9;
    border: 1px solid $borderColor;
    transition: border-color 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .form-input {
        transition: none;
    }
}

.form-input.invalid {
    border-color: $invalidColor;
}

.form-input::-ms-expand {
    background-color: transparent;
    border: 0;
}

.form-input:focus {
    color: #495057;
    border-color: $primaryColor;
    outline: 0;
}

.form-input::-webkit-input-placeholder {
    color: #CCC;
    opacity: 1;
}

.form-input::-moz-placeholder {
    color: #CCC;
    opacity: 1;
}

.form-input:-ms-input-placeholder {
    color: #CCC;
    opacity: 1;
}

.form-input::-ms-input-placeholder {
    color: #CCC;
    opacity: 1;
}

.form-input::placeholder {
    color: #CCC;
    opacity: 1;
}

.form-input:disabled, .form-input[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

select.form-input:focus::-ms-value {
    color: #495057;
    background-color: #fff;
    border-radius: 0;
}

textarea.form-input {
    resize: none;
    height: 100px;
    border-radius: 0;
}

/// checkbox
.checkboxes {
    margin: 0;
    padding: 0;
    list-style: none;
    @include display-flex;
    @include flex-wrap(wrap);
    @include flex-direction(column);

    &.checkboxes-inline {
        @include flex-direction(row);

        li {
            margin-left: 16px;
            &:first-child {
                margin-left: 0;
            }
        }
    }

    .checkboxes {
        padding-left: 24px;
    }

    li {
        margin: 0;
        padding: 0;
        position: relative;

        .form-input-checkbox {
            position: absolute;
            @include opacity(0);
        }
        .form-input-checkbox + label {
            position: relative;
            cursor: pointer;
            padding: 0;
        }
        .form-input-checkbox + label:before {
            content: '';
            margin-right: 7px;
            display: inline-block;
            vertical-align: text-top;
            width: 18px;
            height: 18px;
            outline: 0;
            background: white;
            border: 1px solid $borderColor;
        }
        .form-input-checkbox:hover + label:before {
            border-color: $darkBlue;
        }
        .form-input-checkbox:checked + label:before {
            background: $darkBlue;
            border-color: $darkBlue;
        }
        .form-input-checkbox:disabled + label {
            color: #b8b8b8;
            cursor: auto;
        }
        .form-input-checkbox:disabled + label:before {
            box-shadow: none;
            background: #ddd;
        }
        .form-input-checkbox:checked + label:after {
            content: '';
            position: absolute;
            left: 4px;
            top: 10px;
            background: white;
            width: 2px;
            height: 2px;
            color: white;
            @include box-shadow(2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white);
            @include rotate(45deg);
        }

    }
}

/// checkbox as buttons
.checkboxes-buttons {
    margin: 0;
    padding: 0;
    list-style: none;
    @include display-flex;
    @include flex-wrap(wrap);
    @include flex-direction(column);

    &.checkboxes-inline {
        @include flex-direction(row);

        li {
            margin-left: 10px;
            &:first-child {
                margin-left: 0;
            }
        }
    }

    li {
        margin: 0;
        padding: 0;
        position: relative;

        .form-input-checkbox {
            position: absolute;
            @include opacity(0);
        }
        label span {
            position: relative;
            z-index: 2;
        }
        .form-input-checkbox + label {
            position: relative;
            cursor: pointer;
            padding: 0;
            height: 40px;
            padding: 0 12px;
            text-align: center;
            line-height: 40px;
            min-width: 120px;
        }
        .form-input-checkbox + label:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #eee;
            border: 1px solid $borderColor;
        }
        .form-input-checkbox:hover + label:before {
            border-color: $darkBlue;
        }
        .form-input-checkbox:checked + label {
            color: $darkBlue;
            font-weight: 600;
        }
        .form-input-checkbox:checked + label:before {
            background: white;
            border-color: $darkBlue;
        }
        .form-input-checkbox:disabled + label {
            color: #b8b8b8;
            cursor: auto;
        }
        .form-input-checkbox:disabled + label:before {
            box-shadow: none;
            background: #ddd;
        }

    }
}

// radios
.radios {
    margin: 0;
    padding: 0;
    list-style: none;
    @include display-flex;
    @include flex-wrap(wrap);
    @include flex-direction(column);

    &.radios-inline {
        @include flex-direction(row);

        li {
            margin-left: 16px;
            &:first-child {
                margin-left: 0;
            }
        }
    }

    li {
        margin: 0;
        padding: 0;
        position: relative;

        .form-input-radio {
            position: absolute;
            @include opacity(0);
        }
        .form-input-radio + label {
            position: relative;
            cursor: pointer;
            padding: 0;
        }
        .form-input-radio + label:before {
            content: '';
            margin-right: 7px;
            display: inline-block;
            vertical-align: text-top;
            width: 18px;
            height: 18px;
            @include border-radius(50%);
            outline: 0;
            background: white;
            border: 1px solid $borderColor;
        }
        .form-input-radio:hover + label:before {
            border-color: $darkBlue;
        }
        .form-input-radio:checked + label:before {
            background: $darkBlue;
            border-color: $darkBlue;
        }
        .form-input-radio:disabled + label {
            color: #b8b8b8;
            cursor: auto;
        }
        .form-input-radio:disabled + label:before {
            box-shadow: none;
            background: #ddd;
        }
        .form-input-radio:checked + label:after {
            content: '';
            position: absolute;
            left: 4px;
            top: 10px;
            background: white;
            width: 2px;
            height: 2px;
            color: white;
            @include box-shadow(2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white);
            /*rtl:begin:ignore*/
            @include rotate(45deg);
            /*rtl:end:ignore*/
        }

    }
}

// radios as button
.radios-buttons {
    margin: 0;
    padding: 0;
    list-style: none;
    @include display-flex;
    @include flex-wrap(wrap);
    @include flex-direction(column);

    &.radios-inline {
        @include flex-direction(row);

        li {
            margin-left: 16px;
            &:first-child {
                margin-left: 0;
            }
        }
    }

    li {
        margin: 0;
        padding: 0;
        position: relative;

        .form-input-radio {
            position: absolute;
            @include opacity(0);
        }
        label span {
            position: relative;
            z-index: 2;
        }
        .form-input-radio + label {
            position: relative;
            cursor: pointer;
            padding: 0;
            height: 40px;
            padding: 0 12px;
            text-align: center;
            line-height: 40px;
            min-width: 120px;
        }
        .form-input-radio + label:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #eee;
            border: 1px solid $borderColor;
        }
        .form-input-radio:hover + label:before {
            border-color: $darkBlue;
        }
        .form-input-radio:checked + label {
            color: $darkBlue;
        }
        .form-input-radio:checked + label:before {
            background: white;
            border-color: $darkBlue;
        }
        .form-input-radio:disabled + label {
            color: #b8b8b8;
            cursor: auto;
        }
        .form-input-radio:disabled + label:before {
            box-shadow: none;
            background: #ddd;
        }

    }
}

////// select-wrapper
.select-wrapper {
    position: relative;
    cursor: pointer;
    width: 100%;

    &.select-lg {
        &:after {
            line-height: 2.5;
        }
    }

    &:after {
        content: '';
        width: 24px;
        position: absolute;
        right: 0;
        top: 10px;
        bottom: 6px;;
        padding: 0;
        //line-height: 2.2;
        position: absolute;
        pointer-events: none;
        text-align: center;
        vertical-align: middle;
        background: transparent url('../img/if_ExpandMore_1031518.png') no-repeat 0 0;
    }

    select {
        @include appearance(none);
        cursor: pointer;
        border-radius: 0;
    }

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        select {
            padding-right: 26px
        }
    }
}

.required {
    color: red;
}