/*@import url('prebuilt-theme.css');*/
* { box-sizing: content-box; transition: all ease 0.15s; }


body { background: #09365d; color: #fff; margin: 0; padding: 0; font-family: muli,Helvetica,Arial,Verdana, san-serif; font-weight: 700; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: muli,Helvetica,Arial,Verdana, san-serif; font-weight: 700; }
h1 { color: #fff; font-size: 34px; line-height: 40px; margin-left: 161px; }
h2 { color: rgba(0,0,0,.87); font-size: 24px; line-height: 32px; }
h3 { color: #09365d; font-size: 29px; line-height: 28px; margin: 10px; height: 27px; }
h4 { color: rgba(0,0,0,.87); font-size: 16px; line-height: 24px; }
label { color: #fff; }


.mat-form-field input { color: #fff; }
.mat-form-field label { color: #fff !important; }

.body-content table select { height:30px; border-radius:4px; width:99%; font-size:15px; }


@keyframes slide {
    0% { width: 8px; }
    100% { width: 55px; }
}

@keyframes moveRight {
    0% { margin-right: -14px; }
    100% { margin-right: 36px; }
}

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*Header*/
body .header { position: fixed; top:0; z-index: 2; height: auto; width: 100%; margin: 0 auto; padding: 0; display: flex; align-items: flex-start; justify-content: center; background-color: #285d8a; margin-bottom: 50px; font-size: 14px; }

    /*Header Content*/
    body .header > div { padding: 10px 0 0; margin: 0; }

        /*Title*/
        body .header > div.title { width: calc(50% - 105px); padding: 2px 10px; }
            body .header > div.title h1 { margin: 0; margin-left: 35px; padding: 0; line-height: normal; display: inline-block; }
            body .header > div.title hr { color: #fff; width: 315px; position: absolute; left: 50px; top: 26px; }

        /*Logo Image*/
        body .header > div.logo { width: 210px; position: relative; text-align: center; z-index: 2; }
            body .header > div.logo .bg { position: absolute; top: 0; border-top: 78px solid #285d8a; border-left: 30px solid transparent; border-right: 30px solid transparent; height: 0; width: 150px; }
                body .header > div.logo .bg a  { display:block; position:relative; top:-80px; }
                body .header > div.logo .bg img { height: auto; width: 100%; max-width: 300px; }

        /*Button Selection Group*/
        body .header > div.buttonGroup { width: calc(50% - 155px); padding: 1px 50px 0 10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
            body .header > div.buttonGroup button { float: left; margin: 0; padding: 0; height: 24px; line-height: normal; position: relative; border: none; background: none; }
                body .header > div.buttonGroup button:hover { background: #f8ce41; border: 2px solid #fff; }

        /*Filter List*/
        body .header > div.filterList span { display: flex; flex-direction: column; padding: 0 4px;  width:100%; }
            body .header > div.filterList span label { font-size: 10px; margin: 0; padding: 0; }
            body .header > div.filterList span select { width: 100%; border: none; }











/*Button Controls*/
.btnActions { float: left; width: 100%; margin: 0; padding: 8px 0 0; line-height: normal; position: relative; border: none; background: none; }
    .btnActions a,
    .btnActions input,
    .buttonGroup button { float:left; background: linear-gradient(#c4c4c4, #aaa); max-height:30px; padding: 4px 10px; margin: 0; color: #000; white-space: nowrap; box-shadow: 0px 0px 0px 1px #09365d; text-decoration: none; border: 2px solid #fff; border-radius: 1px; cursor: pointer; font-weight: bold; }
        /*.btnActions a:first-of-type { margin-right:20px; }*/
        .btnActions a:hover,
        .btnActions input:hover,
        .buttonGroup button:hover { background: linear-gradient(#E3B732, #E38332); color: #fff; }

    .btnActions.edit { padding-top: 7px; width: 100%; text-align: right; justify-content: flex-end; }
        .btnActions.edit a { margin:0 5px; }
        .btnActions.edit input { margin:0 5px; padding:3px 10px }









/*New Design Button - Left of the centered logo*/
body .header > div.title h1 + .btnActions { float: right; }











/*Page Content Structure*/
.body-content { width: 95%; margin:100px auto 0; padding: 10px 0; z-index: 1; }

    /*Containing Box*/
    .body-content > div { display: flex; flex-direction: column; width: 100%; margin-top: 0; color: rgba(0,0,0,.87); box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); background-color: #fff; }
    
    .body-content.edit > div,
    .body-content.delete > div,
    .body-content.copy > div { background-color:transparent; padding:0; box-shadow:none; }

    .body-content.delete p,
    .body-content.copy p {  color:#fff; }

    /*Grid Structure*/
    .body-content table { background: #fff; width: 100%; border: 1px solid #ccc; border-spacing: 0; border-collapse: collapse; overflow: hidden; margin: 0; padding: 0; }
        .body-content table tr:nth-of-type(odd) { background-color: #ddd; }

        /*Grid Header Labels*/
        .body-content table tr th { color: #fff; margin: 0; padding: 0; border-right: 1px solid #fff; padding:10px 3px; background: #285d8a; font-size: 17px; font-weight:100; text-align: center; vertical-align:middle; }
            
            .body-content table tr th:last-of-type { width: 55px; }
            .body-content table tr th button { border:none; background:none; color:#fff; width:100%; padding: 10px 2px; outline:none; user-select:none; }

        /*Gird Content Details*/
        .body-content table tr td { text-align: center; border-right: 1px solid #333; border-bottom: 1px solid #999; padding: 10px 2px; font-size: 17px; }
        .body-content table tr td input { height:20px; max-width:88%; margin:0 auto; padding:5px; }
            .body-content table tr td:last-of-type { border-right: 2px solid #fff; }

            /*Grid Link*/
            .body-content table tr td a { background: linear-gradient(#c4c4c4, #aaa); padding: 4px 10px 5px; margin: 0 10px; color: #000; box-shadow: 0px 0px 0px 1px #09365d; text-decoration: none; border: 2px solid #fff; border-radius: 1px; text-decoration: none; outline: none; }
            .body-content table tr td input[type="submit"] { background: linear-gradient(#c4c4c4, #aaa); padding: 4px 10px 5px; margin: 0 10px; color: #000; box-shadow: 0px 0px 0px 1px #09365d; text-decoration: none; border: 2px solid #fff; border-radius: 1px; text-decoration: none; outline: none; }

            .body-content table tr td a:hover { background: linear-gradient(#E3B732, #E38332); color: #fff; }
            .body-content table tr td input[type="submit"]:hover { background: linear-gradient(#E3B732, #E38332); color: #fff; }

                /*Link Delete Icon*/
                .body-content table tr td a.fa-trash { font-size: 0; border: none; box-shadow: none; background: none; }
                    .body-content table tr td a.fa-trash:before { font-size: 17px; background: none; }
                    .body-content table tr td a.fa-trash:hover { color: #fff; -webkit-transform: scale(1.2); transform: scale(1.2); text-shadow: -1px -1px 0 #d12629, 1px -1px 0 #d12629, -1px 1px 0 #d12629, 1px 1px 0 #d12629; }










/*Pageinator*/
.paginator { float: right; margin: 10px; text-align: right; }
    .paginator button,
    .paginator span { padding: 0 5px; }









/*Design Number*/
.designNumber { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; position: absolute; left: 0; top: 47px; background: #285d8a; width: 50%; z-index: 1; padding-left: 50px; height: 26px; margin: 0; padding-top: 2px; padding-bottom: 3px; text-align: left; }
    .designNumber label { margin-bottom: 0; margin-right:8px; }
    .designNumber input { margin: 0 10px; padding: 0; background-color: transparent; border: 0; outline: none; color: #fff; height: auto; line-height: normal; box-shadow: none; }










/*Accordian*/
.accordian { float:left; }

    .accordian .accordianDropdown { background: -webkit-gradient(linear,left top,left bottom,from(#c4c4c4),to(#aaa)); background: linear-gradient(#c4c4c4,#aaa); border-radius: 0; margin: 0 0 10px; padding: 0; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

        /*Selection Text*/
        .accordian .accordianDropdown > label { user-select: none; cursor: pointer; color: #09365d; font-size: 29px; box-sizing: border-box; padding:10px 20px 10px 10px; margin: 0; width: 100%; display: flex; justify-content: space-between; flex-direction: row; align-items: center; }
            .accordian .accordianDropdown > label i { text-shadow: 1px 1px 1px #666; width: 40px; text-align:center; }
                .accordian .accordianDropdown > label i.fa-exclamation { font-size:38px; color:red; }
                .accordian .accordianDropdown > label i.fa-check { font-size:40px; color:green; }

        /*Check Box - Hidden*/
        .accordian .accordianDropdown > label + input { height: 0; width: 0; display:none; }


        .accordian .accordianDropdown > label + input + div.accContent { float: left; clear: both; width: 100%; height: 0; overflow: hidden;  transition: all ease 0.15s; background-color:#fff; }
        .accordian .accordianDropdown > label + input:checked + div.accContent { height: inherit; transition: all ease 0.15s;  }

            .accordian .accordianDropdown > label + input + div.accContent .form-group { float: left; opacity:0; visibility:hidden; transition: all ease 0.15s; transition-delay:0.25s; }
            .accordian .accordianDropdown > label + input:checked + div.accContent .form-group {  opacity:1; visibility:visible; transition: all ease 0.15s; transition-delay:0.25s; }


/*.searchDropdown label { float: left; user-select: none; cursor: pointer; background:url("../Images/searchIcon.png"); width:35px; height:35px; background-size:contain; }*/
.searchDropdown label { float: left; background: linear-gradient(#c4c4c4, #aaa); max-height: 30px; padding: 4px 10px; margin: 0 15px; color: #000; white-space: nowrap; box-shadow: 0px 0px 0px 1px #09365d; text-decoration: none; border: 2px solid #fff; border-radius: 1px; cursor: pointer; font-weight: bold; }
    .searchDropdown label:hover { background: linear-gradient(#E3B732, #E38332); color: #fff; }







/*Search Filters*/
.searchFilters { width:90%; margin:70px auto 0; padding:10px; }
.searchFilters + .body-content { transition:none; }
.searchFilters div { display:flex; flex-direction:row; width:100%; justify-content:space-between; flex-wrap:wrap; align-content:center; }
.searchFilters div span { display:flex; flex-direction:row; width:20%; min-width:300px; padding:0 5px 5px; box-sizing:border-box; }
.searchFilters div span label { width:110px; padding-right:10px; text-align:right; margin:0; }
.searchFilters div span select { width:calc(90% - 110px); max-width:100%; }

.searchFiltersCheckbox + .searchFilters { display:none; }
.searchFiltersCheckbox:checked + .searchFilters { display:block; }
    .searchFiltersCheckbox:checked + .searchFilters + .validation-summary { margin-top:10px; }
    .searchFiltersCheckbox:checked + .searchFilters + .body-content { margin-top: 10px; }





/*Form Group Edit / Copy Layout*/
.form-group { margin: 0; padding:10px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
    .form-group * { box-sizing: border-box; }
    .form-group label { color: #000; font-size: 18px; width: 100%; padding: 0 20px 0 0; max-width: 230px; }
    .form-group.enh > label { max-width:335px; }
        .form-group label + div { width: calc(100% - 230px); }
            .form-group label + div + p { width:60px; color: rgba(0,0,0,.87); margin:0; padding:0 5px; opacity:0.8; font-weight:600; }

    .form-group select,
    .form-group input[type=text],
    .form-group input[type=number] { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; font-weight:900; line-height: normal; color: #000; vertical-align: middle; background-color: #fff; border:none; border-bottom: 1px solid #999; box-shadow:none; border-radius:0; }

    .form-group label + div.rdo { display: flex; flex-direction: row; align-items: center; }
    .form-group .rdo input { width: 20px; height:20px; margin:0 0 0 15px; }
    .form-group .rdo label { width:auto; padding:0 5px; margin:0; }
    









/*Column Grouping*/
.parent { display: flex; flex-direction: column; flex-wrap: wrap; padding:16px 24px; }
    .parent + .parent { padding:0 24px; }        

    .parent .form-group { width:100%; }

    .parent.dual { flex-direction:row; }
    .parent.dual .form-group { width:50%; }

    .parent.three { flex-direction:row; }
    .parent.three .form-group { width:33.333333%; }

.parent h3 { width:100%; color: #09365d; margin:0 0 20px; }
.parent + hr { border-color:#333; border-style: inset; }










/*Validation*/
.body-content.edit .field-validation-error { float: left; clear: both; width: 99%; padding: 10px 5px; background-color: #fff; margin: 5px 0; border: 2px solid red; border-radius: 5px; box-shadow: 1px 1px 1px #000; }








/*Utility*/
.edit .form-group { justify-content:flex-start; }
.utility > label { color:#fff; width:70px; }
.edit label + div { width:250px; }
.edit select { height:30px;  }
.edit .buttonGroup { height:30px; }
.edit .btnActions.edit { padding-top:0; margin-left:7px; }
.edit + p { margin: 0 0 10px 50px; }
.noTop { margin-top:0; }

.saveclear { visibility: hidden; color: yellow; text-align: center; font-size: 2em; opacity: 0; transition: visibility cubic-bezier(1,.01,.67,.69) 5s, opacity cubic-bezier(1,.01,.67,.69) 5s; width:100%;}
.saveshow { visibility: visible; color: yellow; text-align: center; font-size: 2em; }


.validation-summary { margin: 100px 0 0; width: 100%; transition: none; }
    .validation-summary + .body-content { margin-top: 0; transition: none; }
    .validation-summary ul { margin:0 auto; border: 2px solid red; border-left: 0; border-right: 0; background-color: #fff; color: red; display: inline-block; box-shadow: 0px 0px 10px #000 inset; padding: 0; position: relative;  padding: 10px 1%; width: 98%; }
    .validation-summary ul:before { content: "An Error Has Occurred:"; position: absolute; top: -30px; left: 0; font-size: 18px; padding: 0 10px; color: #fff; font-weight: normal; }
    .validation-summary li { list-style: none; padding: 3px 10px; }










/*Constants*/

.body-content .constants { display:flex; flex-direction:row; flex-wrap:wrap; }
    .body-content .constants > div { width: 30.3333%; border: 1px solid #ccc; margin: 10px 1.5%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: center; box-sizing:border-box; }
        .body-content .constants > div * { box-sizing:border-box; }

        .body-content .constants div div { width: 48%; margin: 0 auto; padding:10px; }
        .body-content .constants div div:nth-of-type(1) { width:100%; }
            .body-content .constants div div:nth-of-type(1) p { display:none; height:0; width:0; }

            .body-content .constants div div p { color: #09365d; border-bottom: 1px dotted #E3B732; font-size: 18px; }
        .body-content .constants div div p + span { padding:0 5px; display:block; }

        

.body-content .prices th {width:20%; margin:0; padding:5px 0; }

.body-content .prices td input { padding: 10px; text-align: center; }









/*Validation*/
.body-content > div.validation-summary-errors { background-color: #f00; color: #fff; padding: 10px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 10px 0; }
    .body-content > div.validation-summary-errors ul { list-style:none; margin:0; padding:0; }
.body-content > div.validation-summary-errors li { color:#fff; }








/*Reason for Change*/
.body-content > div.reasonForChange { display: flex; justify-content: space-between; flex-direction: row; margin-bottom: 20px; background-color: transparent; color: #fff; text-shadow: none; align-items: center; align-content: center; margin: 0 0 20px; padding: 0; box-shadow: none; }
    .body-content > div.reasonForChange p { margin:0 auto; padding:0 20px 0 0; width:150px; }
    .body-content > div.reasonForChange .utility { width:calc(100% - 150px);  padding:0; }
        .body-content > div.reasonForChange .utility input { text-overflow: ellipsis; font-weight:100; }


.cat_ { background-color: white;}
.cat_Price {background-color:aquamarine;}
.cat_Mechanical { background-color: blanchedalmond;}
.cat_Radiator { background-color:lightblue;}