.clear {
    clear: both;
    float: none !important;
}

    .clear:after {
        display: table;
        content: " ";
        clear: both;
    }


div.fwrap { /* defines the outer wrapper for floating position divs */
    position: relative;
    padding: 0px;
}

div.fwrap > div {
    float: left;
}

input[type="text"], input[type="date"], input[type="number"], input[type="password"], select, textarea, .riTextBox {
    border: 1px rgba(0,0,0,.5) solid;
    /*font-size: 14px;
    line-height: 24px;*/
    font-size: 12px;
    line-height: 16px !important;
    border-radius: 0;
}

select {
    height: 20px;
}

.req-err {
    border: 1px #ff0000 solid !important;
    background-color: #ffff00;
}

/*===============================
    responsive widths 
==============================*/
.ctl-row {
    margin-bottom: 12px;
    position: relative;
}

    .ctl-row > div, .ctl-row > span > div {
        float: left;
        clear: none !important;
        box-sizing: border-box;
    }

    .ctl-row.two > div, .ctl-row.two > span > div {
        width: 49.5%;
        margin: 0 .5% 0 0;
    }
        .ctl-row.two > div:last-child, .xxctl-row.two > span > div:last-child {
            width: 49.5%;
            margin: 0 0 0 .5%;
        }

    .ctl-row.three > div, .ctl-row.three > span > div {
        width: 33%;
        margin: 0 .33% 0 0;
    }
        .ctl-row.three > div:last-child, .xxctl-row.three > span > div:last-child {
            width: 33%;
            margin: 0 0 0 .33%;
        }
    .ctl-row.four > div, .ctl-row.four > span > div {
        width: 24.5%;
        margin: 0 .5% 0 0;
    }
        .ctl-row.four > div:last-child, .xxctl-row.four > span > div:last-child {
            width: 24.5%;
            margin: 0 0 0 .5%;
        }

    .ctl-row.five > div, .ctl-row.five > span > div {
        width: 19.5%;
        margin: 0 .5% 0 0;
    }

.one-one, .ctl-row.one > div {
    width: 100%;
}

    .one-half, .ctl-row.half {
        width: 50%;
    }

    .one-half-m, .ctl-row.half-m {
        width: 49%;
        margin: 0 1% 0 0;
    }
    

.one-third {
    width: 33.33%;
}

.one-third-m {
    width: 32.33%;
    margin: 0 1% 0 0;
}

.one-four {
    width: 25%;
}

.one-four-m, .ctl-row.four-m > div {
    width: 24%;
    margin: 0 1% 0 0;
}

.three-four {
    width: 75%;
}

.three-four-m {
    width: 74%;
    margin: 0 1% 0 0;
}

.one-five, .ctl-row.five > div,, .ctl-row.dive-m:last-child > div {
    width: 20%;
}

.one-five-m, .ctl-row.five-m > div {
    width: 19%;
    margin: 0 1% 0 0;
}
.two-five {
    width: 40%;
}

.two-five-m {
    width: 39%;
    margin: 0 1% 0 0;
}
.three-five {
    width: 60%;
}

.three-five-m {
    width: 59%;
    margin: 0 1% 0 0;
}
.four-five {
    width: 80%;
}

.four-five-m {
    width: 79%;
    margin: 0 1% 0 0;
}

.two-third {
    width: 66.66%;
}

.two-third-m {
    width: 65.66%;
    margin: 0 1% 0 0;
}

/*===============================
    responsive widths 
==============================*/

/*==========================================
    CONTROL LAYOUT 

============================================*/
.space20 {
    display: block;
    height: 20px;
}

span.icon-offset {
    display: inline-block;
    margin-left: 24px;
}


.biz-form select {
    height: 22px;
}

.ctl-wrap {
    display: block;
    width: 100%;
    margin-bottom: 8px !important;
    clear: both;
}
.ctl-wrap.flow {
    display: inline-block;
    width: auto;
    margin-right: 8px;
}

    .ctl-wrap:after {
        display: table;
        content: " ";
        clear: both;
    }

    .ctl-wrap > .lbl {
        font-weight: bold;
        display: inline-block;
        width: 20%;
        float: left;
        min-height: 18px;
        position: relative;
        text-align: right;
        padding-right: 4px;
        box-sizing:border-box;
    }

    .ctl-wrap > .lbl.small {
        width: auto !important;
        max-width: 20% !important;
        padding-right: 4px;
        box-sizing: border-box;
    }
        .ctl-wrap.fix100 > .lbl {
            width: 100px !important;
            max-width: 100px !important;
        }
        .ctl-wrap.fix150 > .lbl {
            width: 150px !important;
            max-width: 150px !important;
        }
        .ctl-wrap.fix200 > .lbl {
            width: 200px !important;
            max-width: 200px !important;
        }
        .ctl-wrap.fixEqual > .lbl, .ctl-row.fixLbl .ctl-wrap > .lbl {
            white-space: nowrap;
            width: auto;
            box-sizing: border-box;
        }
 /*       .ctl-wrap.fixEqual {
            table-layout:fixed;
        }
        .ctl-wrap.fixEqual > .lbl {
            table-layout: fixed;
        }*/

        .ctl-wrap.wide > .lbl {
            width: 40%;
            text-align: left;
        }
    .ctl-wrap.medium > .lbl {
        width: 30%;
        text-align: left;
    }
    .ctl-wrap.flow > .lbl {
        padding-right: 8px;
        width: auto;
        white-space: nowrap;
    }

    .lbl[data-req="true"]:after {
        content: " *";
        font-size: 100%;
        color: #ff0000;
        vertical-align: top;
    }

    .ctl-wrap > .ctl {
        display: inline-block;
        width: 80%;
        float: left;
        position: relative;
        xxmin-height: 28px;
    }
    .ctl-wrap > .ctl.nw {
        white-space: nowrap;
    }

        .ctl-wrap > .ctl.even2 > [type="text"], .ctl-wrap > .ctl.even2 > select {
            width: 49% !important;
            margin: 0 .5% 0 0;
            box-sizing: border-box;
        }
        .ctl-wrap > .ctl.even3 > [type="text"], .ctl-wrap > .ctl.even3 > select {
            width: 32% !important;
            margin: 0 .33% 0 0;
            box-sizing: border-box;
        }
        .ctl-wrap > .ctl.even4 > [type="text"], .ctl-wrap > .ctl.even4 > select {
            width: 24% !important;
            margin: 0 .5% 0 0;
            box-sizing: border-box;
        }

        .ctl-wrap > .ctl.even2 > span, .ctl-wrap > .ctl.even3 > span, .ctl-wrap > .ctl.even4 > span {
            display: inline-block;
            box-sizing: border-box;
            white-space: nowrap;
        }
        .ctl-wrap > .ctl.even2 > span {
            width: 49% !important;
            margin: 0 .5% 0 0;
        }
        .ctl-wrap > .ctl.even3 > span {
            width: 32% !important;
            margin: 0 .33% 0 0;
        }
        .ctl-wrap > .ctl.even4 > span {
            width: 24% !important;
            margin: 0 .5% 0 0;
        }
        .ctl-wrap > .ctl.even5 > span {
            width: 19% !important;
            margin: 0 .5% 0 0;
        }
        .ctl-wrap > .ctl.even6 > span {
            width: 16% !important;
            margin: 0 .33% 0 0;
        }

            .ctl-wrap.wide > .ctl {
                width: 60%;
                text-align: left;
            }
    .ctl-wrap.medium > .ctl {
        width: 70%;
        text-align: left;
    }
.ctl-wrap.flow > .ctl, .ctl-wrap.fix100 > .ctl, .ctl-wrap.fix150 > .ctl, .ctl-wrap.fix200 > .ctl, .ctl-wrap.fixEqual > .ctl {
    width: auto;
}

        .ctl-wrap > .ctl > .valid, .ctl-wrap > .ctl > .not-valid {
            display: none;
            position: absolute;
            top: 2px;
            right: 4px;
            opacity: .7;
            font-size: 18px;
        }

        .ctl-wrap > .ctl[data-valid="true"] > .valid {
            color: green;
            display: inline-block;
        }

        .ctl-wrap > .ctl[data-valid="false"] > .not-valid {
            color: #ff0000;
            display: inline-block;
        }

        .ctl-wrap > .ctl > input[type="text"],
        .ctl-wrap > .ctl > input[type="password"],
        .ctl-wrap > .ctl > input[type="number"],
        .ctl-wrap > .ctl > select {
            width: 100%;
            box-sizing: border-box;
        }

    .ctl-wrap.vertical > .lbl, .ctl-wrap.vertical > .ctl {
        display: block;
        width: 100%;
        float: none;
        text-align: left;
    }

    sup.msg {
        color: blue;
        cursor: pointer;
        font-weight: bold;
    }

    a.smaller {
        font-size: 14px;
        line-height: 16px;
    }

/*================================
    TEXT ALIGNMENT
==================================*/
.textRight {
    text-align: right;
}
.textCenter {
    text-align: center;
}

/*===================================
    VALIDATION
===================================*/
.val-sum-float {
    position: absolute;
    top: 10px;
    right: 10px;    
    float: none !important;
    z-index: 10000;
}
    .val-sum-float > [data-valsummary="true"] {
        color: #ff0000;
        border: 1px #ff0000 solid;
        background-color: rgba(255, 255, 0, .3);
        font-weight: bold;
        padding: 16px 16px 16px 50px;
        position: relative;
    }
        .val-sum-float > [data-valsummary="true"]:before {
            content: "\f071";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 2em;
            position: absolute;
            top: 24px;
            left: 8px;
        }
        .val-sum-float ul, .val-sum-float li {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }