﻿.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.marg-bot {
    margin-bottom: 10px;
}


div.fwrap { /* defines the outer wrapper for floating position divs */
    position: relative;
    padding: 0px;
}

    div.fwrap > div {
        float: left;
    }



    .login-right input[type="text"], .login-right input[type="password"] {
        font-size: 16px;
        line-height: 24px !important;
    }

    select {
        height: 20px;
    }


.req-err {
    border: 2px #ff0000 solid;
    background-color: #ffff00;
}

/*=================================
    HOME PAGE
==================================*/
div.hp-search {
    width: 50%;
    margin: 40px auto;
}

/*=================================
    TAB PAGES
===================================*/
.tabPageWrap {
    position: relative;
    width: 100%;
    margin-top: 20px;
}

.tabPageWrap > .tp-tabs {
    padding-top: 40px;
    width: 10%;
    float: left;
}
    .tabPageWrap > .tp-tabs > .tab {
        display: block;
        width: 100%;
        cursor: pointer;
        font-size: 14px;
        line-height: 16px;
        padding: 4px;
        background-color: #ddd;
        color: #000000;
        margin-bottom: 4px;
    }
        .tabPageWrap > .tp-tabs > .tab.selected {
            background-color: #cc6602;
            color: #ffffff;
        }

        .tabPageWrap > .tp-tabs > .tab.disabled {
            background-color: #eee;
            color: #bbb;
            cursor: default;
        }

    .tabPageWrap > .tp-body {
        border: 2px #cc6602 solid;
        padding: 10px;
        width: 90%;
        float: left;
        min-height: 450px;
    }
div.boxed {
    border: 2px #cc6602 solid;
    padding: 10px;
    width: 100%;
    min-height: 450px;
}

/*--- END TAB PAGES ---*/

/*--- MISC LAYOUT ---*/
.btn-wrap {
    display: block;
    margin: 8px 0px;
    text-align: right;
}
/*===============================
    responsive widths 
==============================*/
/*--- BOOTSTRAP OVERRIDES ---*/
div.row > [class^="col-md-"] {
    padding: 0 8px 0 8px;
}
div.row {
    margin-left: -8px !important;
    margin-right: -8px !important;
    margin-bottom: 10px;
}
div.row.nbm, .nbm {
    margin-bottom: 0px;
}
/*--- END BOOTSTRAP OVERRDIES ---*/

.ctl-wrap > .lbl {
    font-weight: bold;
    display: inline-block;
    width: 20%;
    float: left;
}
.ctl-wrap > .lbl > label {
    font-weight: inherit;
    text-align: inherit;

}
.ctl-wrap > .lbl.down {
    padding-top: 3px;
}
.ctl-wrap > .ctl {
    display: inline-block;
    width: 80%;
    float: left;
    position: relative;
}

.ctl-wrap.equal > .lbl, .ctl-wrap.equal > .ctl {
    width: 50%;
}

.ctl-wrap.wide > .lbl {
    width: 40%;
    text-align: left;
}

.ctl-wrap.medium > .lbl {
    width: 30%;
    text-align: left;
}
.ctl-wrap.wide > .ctl {
    width: 60%;
    text-align: left;
}

.ctl-wrap.medium > .ctl {
    width: 70%;
    text-align: left;
}

.ctl-wrap.small > .lbl {
    width: 10%;
    text-align: left;
}

.ctl-wrap.small > .ctl {
    width: 90%;
    text-align: left;
}

.ctl-wrap.flex > .lbl, .ctl-wrap.flex > .ctl {
    width: auto !important;
    white-space: nowrap;
}
.ctl-wrap.flex > .lbl {
    padding-right: 8px;
}


.lblFix50 .ctl-wrap > .lbl {
    width: 50px !important;
    padding-right: 8px !important;
}
.lblFix60 .ctl-wrap > .lbl {
    width: 60px !important;
    padding-right: 8px !important;
}
.lblFix75 .ctl-wrap > .lbl {
    width: 75px !important;
    padding-right: 8px !important;
}
.lblFix100 .ctl-wrap > .lbl {
    width: 100px !important;
    padding-right: 8px !important;
}
.lblFix120 .ctl-wrap > .lbl {
    width: 120px !important;
    padding-right: 8px !important;
}
.lblFix125 .ctl-wrap > .lbl {
    width: 125px !important;
    padding-right: 8px !important;
}
.lblFixNW .ctl-wrap > .lbl {
    white-space: nowrap !important;
    padding-right: 8px !important;
}
[class^='lblFix'] .ctl-wrap > .ctl:not(.o-ride), [class*=' lblFix'] .ctl-wrap > .ctl:not(.o-ride) {
    width: auto !important;
}
.ctl.pad-left {
    padding-left: 8px;
}
/*[class^='lblFix'] .ctl-wrap > .lbl.required, [class*=' lblFix'] .ctl-wrap > .lbl.required, .ctl-wrap.flex > .lbl.required {
    padding-right: 12px !important;
    box-sizing: border-box;
}*/


.ctl-row {
    margin-bottom: 12px;
    position: relative;
}
.equal{ display: flex;  }

.equal fieldset {
    height: 100%;
}

    .ctl-row > div, .ctl-row > span > div {
        float: left;
        clear: none !important;
        box-sizing: border-box;
    }
    .equal > div, .equal > span > div {
        display: table-cell;
    }

    .ctl-row.one-two > div:first-child {
        width: 33%;
        margin: 0 .33% 0 0;
    }
    .ctl-row.one-two > div:last-child {
        width: 66%;
        margin: 0 .66% 0 0;
    }

    .ctl-row.two-one > div:last-child {
        width: 33%;
        margin: 0 .33% 0 0;
    }

    .ctl-row.two-one > div:first-child {
        width: 66%;
        margin: 0 .66% 0 0;
    }

    .ctl-row.three-one > div:first-child {
        width: 74.5%;
        margin: 0 .5% 0 0;
    }
    .ctl-row.three-one > div:last-child {
        width: 25%;
        margin: 0 0 0 0;
    }

    .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 .55% 0 0;
    }
    .ctl-row.five > div:last-child, .ctl-row.five > span > div:last-child {
        width: 19.5%;
        margin: 0 0 0 .0;
    }

    .ctl-row.seven > div, .ctl-row.seven > span > div {
        width: 13.75%;
        margin: 0 .5% 0 0;
    }

    .ctl-row.six > div, .ctl-row.six > span > div {
        width: 16.1%;
        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.nm > div, .ctl-row.five-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;
    position: relative;
}

    .ctl-wrap:not(.compact):after {
        display: table;
        content: " ";
        clear: both;
    }



    .ctl-wrap > .ctl > .see-phrase {
        z-index: 10000;
        position: absolute;
        top: 4px;
        right: 4px;
        cursor: pointer;
    }

        .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 > input[type="date"],
    .ctl-wrap > .ctl > select {
        width: 100%;
        box-sizing: border-box;
        border-radius: 3px;
        height: 24px;
    }
        .ctl-wrap > .ctl > input[type="text"]:not(.val-err),
        .ctl-wrap > .ctl > input[type="password"]:not(.val-err),
        .ctl-wrap > .ctl > input[type="number"]:not(.val-err),
        .ctl-wrap > .ctl > input[type="date"]:not(.val-err),
        .ctl-wrap > .ctl > select:not(.val-err) {
            border: 1px #000000 solid !important;
        }
    .ctl-wrap > .ctl > input[type="checkbox"]:not(.val-err) {
        border: 1px #000000 solid !important;
    }
    .ctl-wrap > .ctl > input[type="number"] {
        height: 26px;
    }
    .ctl-wrap > .ctl.two > input[type="text"],
    .ctl-wrap > .ctl.two > input[type="password"],
    .ctl-wrap > .ctl.two > input[type="number"],
    .ctl-wrap > .ctl.two > input[type="date"],
    .ctl-wrap > .ctl.two > select {
        width: 48%;
    }
    .ctl-wrap > .ctl.two > div.space {
        width: 2%;
        box-sizing: border-box;
        display: inline-block;
    }
    .ctl-wrap > .ctl > select {
        height: 26px;
        border-radius: 3px;
    }

    .ctl-wrap.vertical > .lbl, .ctl-wrap.vertical > .ctl {
        display: block;
        width: 100%;
        float: none;
    }

sup.msg {
    color: blue;
    cursor: pointer;
    font-weight: bold;
}

a.smaller {
    font-size: 14px;
    line-height: 16px;
}


/*================================
    TEXT ALIGNMENT
==================================*/
.text-right {
    text-align: right;
}

.text-center {
    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;
    }

/*--- BOOTSTRAP OVERRIDES ---*/
[class^="col-md-"].nopad {
    padding: 0px !important;
}
[class^="col-md-"].nopad-r {
    padding-right: 0px !important;
}
[class^="col-md-"].nopad-l {
    padding-left: 0px !important;
}
/*
    =====================================
    SPECIAL
    =====================================
*/
div.param-hdr {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    border-bottom: 1px solid #000000;
    margin-bottom: 8px;
}
