@import url(//use.fontawesome.com/releases/v5.12.0/css/all.css);

/* --- GENERAL STYLING ---*/
div, span, fieldset {
    box-sizing:border-box;
}

/*
------------------------------------
    floats and text aligns
------------------------------------
*/
.float-l {
    float: left;
}
.float-r {
    float: right;
}
.float-clear::after {
    content: "";
    clear: both;
    display: table;
}
.text-r {
    text-align: right;
}
.text-c {
    text-align: center;
}

form.aopa_search  input[type="text"] {
	font-size: 14px;
	line-height: 20px;
	padding: 2px;
}
form.aopa_search  select {
	font-size: 14px;
	height: 24px;
	margin: 0px;
}

 /*
-------------------------------
    form layout controls
-------------------------------
*/
    .ctl-wrap {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}
    .ctl-wrap > .lbl {
        display: block;
        font-weight: bold;
        font-size: 14px;
    }
    .ctl-wrap > .ctl {
        display: block;
    }
        .ctl-wrap > .ctl input[type="text"], .ctl-wrap > .ctl input[type="date"], .ctl-wrap > .ctl input[type="email"], .ctl-wrap > .ctl input[type="password"],
        .ctl-wrap > .ctl select, .ctl-wrap > .ctl textarea {
            width: 100%;
        }
    .ctl-wrap.s2080 > .lbl {
        display: inline-block;
        width: 20%;
        text-align: right;
        padding-right: 4px;
    }
    .ctl-wrap.s2080 > .ctl {
        display: inline-block;
        width: 80%;
    }
    .ctl-wrap.s3070 > .lbl {
        display: inline-block;
        width: 30%;
        text-align: right;
        padding-right: 4px;
    }

    .ctl-wrap.s3070 > .ctl {
        display: inline-block;
        width: 70%;
    }
    .ctl-wrap.s4060 > .lbl {
        display: inline-block;
        width: 40%;
        text-align: right;
        padding-right: 4px;
    }

        .ctl-wrap.s4060 > .ctl {
            display: inline-block;
            width: 60%;
        }
    .ctl-wrap.s5050 > .lbl {
        display: inline-block;
        width: 50%;
        text-align: right;
        padding-right: 4px;
    }

    .ctl-wrap.s5050 > .ctl {
        display: inline-block;
        width: 50%;
    }
    .ctl-wrap[class*="s"] > .lbl, .ctl-wrap[class*="s"] > .ctl {
        float: left;
    }
    /* --- RESPONSIVE GRID VIEW --- 

    The grid view is based on 12 columns spanning 100% width of the page
    Columns should be placed in a <div class="row" /> container to ensure their correct rendering on the page
*/
    .row {
        width: 100%;
    }

[class*="col-"] {
    width: 100%; /* default width for mobile devices */
    padding: 15px;
}

.row.equal {
    display: inline-flex;
}
.row.equal fieldset {
    height: 100%;
}
    .row.equal [class*="col-"] {
        /*flex: 1;*/
    }
    .row::after {
        content: "";
        clear: both;
        display: table;
    }



@media (min-width: 688px) {
    [class*="col-"] {
        float: left;
    }
    .col-1, .col-2 { width: 16.66%; }
    .col-3, .col-4 { width: 33.33%; }
    .col-5, .col-6 { width: 50%; }
    .col-7, .col-8 { width: 66.66%; }
    .col-9, .col-10 { width: 83.33%; }
    .col-11, .col-12 { width: 100%; }
}

@media (min-width: 1312px) {
    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33%; }
    .col-8 { width: 66.66%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33%; }
    .col-11 { width: 91.66%; }
    .col-12 { width: 100%; }
}

/*--- HAZE BOX ---*/
.haze-box {
    border: 1px #dddddd solid;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,.2);
    border-radius: 3px !important;
    background-color: #ffffff;
}

.haze-box-nb {
    border: 1px #dddddd solid;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,.2);
    border-radius: 3px !important;
}

/*
=====================================
Results display
=====================================
*/
.comp_res {
	padding: 8px;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 6px;
}
.comp_res  span {
	display: block;
}
.comp_res .cr_name {
	font-weight: bold;
}
.comp_res .cr_mtype {
	font-weight: bold;
	font-style: italic;
}