.searchArea {
     background-color: #e7e7e7;
border: 0 solid #d85048;
color: black;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 1px;
margin: 21px 0 0 0;
font-size: 14px;
padding: 6px 15px 6px 10px;
width: 100%;
height: 42px;
}

.littleNavFilter ul {
    display:inline-flex; 
    margin:0px;
    padding: 0;
    background-color:white;
}

.littleNavFilter ul .left{
    padding: 5px 10px; 
    border-left: 1px solid #ababab; 
    border-right: 1px solid #ababab;
}

.littleNavFilter ul .next{
    padding: 5px 10px; 
    border-right: 1px solid #ababab;
}

.littleNavFilter ul .extra{
   padding: 5px 10px; 
   margin-left:100px;
}

.littleNavFilter ul li a {
    color: black;
}







        ul {
            list-style-type: none;
        }
        
        body {
            font-family: Open Sans;
            height:100%;
        }
        
        .header {
            width:100%;
            height:58px;
        }
        
        .header img{
            cursor: pointer;
        }
        
        .loginArea {
            margin: 0 auto;
            width:350px;
            text-align: center;
        }
        
        .MainContent{
            height:80%;
            margin-top:20px;
            overflow-y: auto;
        }
        
        #itemArea
        {
            /*overflow-y: auto;
            height:475px;
            */
            width:100%;
        }
        
        .colDivider{
            width:100%;
            margin:-10px;
        }
        
        .col2{    
            width: 47%;
            float: left;    
            margin: 10px;
            text-align: center;
        }
        
        .AreasButton {
            border-radius: 3px;
            width: 235px;
            height: 75px;
            border: 2px solid black;
            margin: 5px;
            background-color: rgb(39,57,94);
            color: white;
            font-size: 0.98em;
            float: left;
        }
        
        .ab_active {
            /*border: 4px solid Yellow;*/
            font-weight: bold;
            box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
        }
        
        .AreasButton:hover {
            background-color: rgb(39,77,114);
        }
        
        .AreasButton:disabled {
            background-color:dimgray;
            color:black;
        }
        
        .Back_Red {
            margin-top: 30px;
            border-radius: 3px;
            background-color: #BD2426;
            color: lightgray;
            font-size: large;
            border: 2px solid black;
            margin:7px;
            padding: 5px 5px 2px 5px
        }
        
        .bottom {
            position: static;
            bottom:0px;
            margin:0;
            padding:0;
            text-align: center;
            clear: both;
            width: 100%;
        }
        
        input[type=text], input[type=password], input[type=email], select
        {
            font-size: large;
            margin:7px;
            width:252px;
        }
        
        select{
            width:252px;
        }
        
        .regSelect{
    border-radius:0px; 
    border: 1px solid #b3b3b3; 
    background-color: #e6e6e6;
    padding:10px;
        }
        
        .del_Select{
            width:215px;
        }
        
        .fourbyfour {
            width:100%;
            margin-top:80px;
            display:inline-flex;
        }
        
        .fourbyfour img{
            width:25%;
        }
        
        .action_button
        {
            border: 2px solid black;
            border-radius: 3px;
            width:250px;
            color:lightgray;
            font-size: large;
            margin:7px;
            padding: 5px 5px 2px 5px
        }
        
        .action_button:disabled
        {
            background-color: dimgray;
        }
        
        .reduceButtonSize
        {
            width:100px;
            font-size: small;
        }
        
        .image_button
        {
            padding: 3px;
        }
        
        .image_button img{
            width:30px;
            height:30px;
        }
        
        .blue:not(:disabled):hover{
            background-color: rgb(0, 99, 172);
        }
        
        .blue{
            background-color: rgb(0, 79, 152);
            color: white;
        }
        
        .red{
            background-color: firebrick;
        }
        
        .complete{
            background-color: green;
        }
        
        .inprogress{
            background-color: darkgoldenrod;
        }
        
        .notstarted{
            background-color: rgb(39,57,94);
        }
        
        .red:not(:disabled):hover{
            background-color: indianred;
        }
        
        a{
            cursor: pointer;
        }
        
        .approvalBox{
            border:1px solid #b3b3b3;
            border-radius: 3px;
            background-color: whitesmoke;
            margin: 10px;
            padding:10px;
        }
        
        .approvalBox td:nth-child(1), td:nth-child(4){
            width: 40%;
        }
        
        #indArea li{
            list-style: none;
            display:inline;
        }
        
        .pLogo{
            margin: 3px 3px;
            cursor: pointer;
        }
        
        
        /****** Style Star Rating Widget *****/
        
        @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
        fieldset,
        label {
            margin: 0;
            padding: 0;
        }
        
        h1 {
            font-size: 1.5em;
            margin: 10px;
        }
        
        .rating {
            border: none;
            float: left;
        }
        
        .rating > input {
            display: none;
        }
        
        .rating > label:before {
            margin: 5px;
            font-size: 50px;
            font-family: FontAwesome;
            display: inline-block;
            border: 2px;
        }
      
        .rating > label {
            font-size: 50px;
            color: #ddd;
            float: right;
            border: 2px;
        }
        
        
        .navmenu-main{
            display:inline;
        }
        
        @media screen and (max-width:320px){
        .action_button
        {
            width:100%;
            margin:0;
            margin-bottom:5px;
        }
        }
        .navmenu-main{
            display:none;
        }
        @media screen and (max-width: 480px), (max-width: 767px)  {
        
        
        
        
        .rating > label:before {
            margin: 3px;
            font-size: 29px;
            font-family: FontAwesome;
            display: inline-block;
            border: 2px;
        }
      
        .rating > label {
            font-size: 29px;
            color: #ddd;
            float: right;
            border: 2px;
        }
        
        .col2{    
            width: 98%;
            float: left;
            text-align: center;
        }
        
        .pLogo{
            width:150px;
        }
        
        }
        
        
        
        /***** CSS Magic to Highlight Stars on Hover *****/
        
        .rating > input:checked ~ label,
        /* show gold star when clicked */
        
        .rating:not(:checked) > label:hover,
        /* hover current star */
        
        .rating:not(:checked) > label:hover ~ label {
            color: #FFD700;
        }
        /* hover previous stars in list */
        
        .rating > input:checked + label:hover,
        /* hover current star when changing rating */
        
        .rating > input:checked ~ label:hover,
        .rating > label:hover ~ input:checked ~ label,
        /* lighten current selection */
        
        .rating > input:checked ~ label:hover ~ label {
            color: #FFED85;
        }
        
        hr.style-two{
            border: 0;
            height: 2px;
            background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0))
        }
        
        hr.style-four{
            height:12px;
            border:0;
            box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
        }
        
        hr.style-seven{
            height: 30px;
            border-style: solid;
            border-color: black;
            border-width: 1px 0 0 0;
            border-radius: 20px;
        }
        
        hr.style-seven:before{
            display: block;
            content: "";
            height: 30px;
            margin-top: -31px;
            border-style: solid;
            border-color: black;
            border-width: 0 0 1px 0;
            border-radius: 20px;
        }

/* VERSION 2 

Red: #bc2426
Black: #3c3c3c
Gray: #e6e6e6
DarkGray: #b3b3b3


*/

.indBox{
    background-color: #bc2426;
    margin:3px;
}

.indBox img
{
    width: 150px;
}

.productArea{
    border: 3px solid #e6e6e6;
    width:240px;
    height:350px;
    float:left;
    margin:14px 7px;
    padding:10px;
    position: relative;
}
.productArea h4{
    height:50px;
}

.productArea p{
    height:200px;
    overflow-y: hidden;
}

.pRate{
    border:0px;
    width:150px;
    font-size: large;
    padding:3px;
    position: absolute;
    bottom: 20;
    right: 0;
    background-color:#bc2426;
    color:white;
}

.precBlack{
    background-color: #3c3c3c;
}

.precRed{
    background-color: #bc2426;
}

.precGray{
    background-color: #e6e6e6;
}

.precDarkGray{
    background-color: #b3b3b3;
}

.modal-body h2{
    color:black;
    margin: 20px 0;
}

.theGrid th{
    cursor: pointer;
}
.pComp{
    border:0px;
    width:125px;
    font-size: large;
    padding:3px;
    position: absolute;
    bottom: 20;
    right: 0;
    background-color:#3c3c3c;
    color:white;
}

.rArea{
    width:80%; margin:0 auto;
}

.rBoxLeft{
    width:20%; 
    height:80%; 
    border:1px solid 
    #b3b3b3; 
    position: absolute;
    top: 8%;
    left: 9.8%;
}


.rblTitleArea{
    background-color:#3c3c3c; width:100%; margin:0 auto; text-align:right; padding:65px 12px;
}

.rblTitleArea h6{
    color:white;
    font-size:1.4em;
    font-weight: bold;
    text-shadow: 2px 2px 8px black;
}

.rblButtonArea{
    width: 100%;
    display:inline-flex;
}

.rblButtonAreaB{
    position: absolute;
    bottom: 0;
    width: 100%;
    display:inline-flex;
}

.rblButton{
    width: 24%;
    height: 50px;
    margin:1px auto;
    background-color:#b3b3b3;
    color:white;
    border: 0;
}

.rblButton:hover:enabled{
    background-color:#bc2426;
}

.rblButton img{
    width: 35%;
}

.rInfoArea {
    padding:10px;
}

.rInfoArea p {
    font-size: 0.9em;
}

.ltop{
    height: 410px;
    background-position: 0 -65px;
    margin:0 0px;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 50px;
}

.ltopCon{
    width:650px;
}

.protopCon{
    width:530px;
}

form.submitted .ng-invlid{
    border:1px solid #f00;
}

.instructionalArea{
    background-color: #e6e6e6;
    height: 355px;
    margin:0 0px;
    padding: 50px 200px;
    text-align: center;
}

.instructionalArea p{
    font-size: 1.5em;
}

.standardSets{
    padding: 0 25px;
}

#products h3{
    color: black;   
}

.protopCon h1{
    font-size:3em;
    color: white;
    margin-top:90px;
    margin-bottom: 10px;
}

.ltop h2, h3{
    color: white;
}

.ltop h1{
    font-size:4em;
    color: white;
    margin-top:20px;
    margin-bottom: 10px;
}

.lw{
    background-color: #bc2426;
    margin:0px;
    text-align: center;
    padding:65px 150px;
}

.lw p{
    color:white;
    font-size: 1.5em;
}

.lh{
    background-color: #3c3c3c;
    margin:0px;
    text-align: center;
    padding:50px 150px;
}

.lh p{
    color:white;
    font-size: 1.5em;
}

.lh h1{
    font-size:4em;
    color: white;
    margin-top:20px;
    margin-bottom: 10px;
}

.lw h1{
    font-size:4em;
    color: white;
    margin-top:20px;
    margin-bottom: 10px;
}

.lind h1{
    font-size:4em;
    color: white;
    margin-top:20px;
    margin-bottom: 10px;
}

.lh h1{
    font-size:4em;
    color: white;
    margin-top:20px;
    margin-bottom: 10px;
}

.lind{
    text-align: left;
    padding:60px 403px;
}

.smallBtn{
    font-size: 1.05em;
    font-weight: 900;
    padding:8px 20px;
    color:white;
}

.smallBtn:disabled{
    background-color: #666666
}

.accInputs {
    border-radius:0px; 
    border: 1px solid #b3b3b3; 
    background-color: #e6e6e6;
    padding:10px;
}

.right{
    float:right;
    margin-right:10px;
}

.left{
    float:left;
}

.bleft{
    border-left: 1px solid white;
}

.footer{
    background-color: #3c3c3c;
    margin:0 0px;
    height:11.8%;
    color:white;
    padding:25px 50px;
    margin-top:25px;
    clear:both;
    position: absolute;
    bottom:0;
    width: 100%;
}

.imgTitle{
    height: 410px;
    background-position: 0 -65px;
    margin:0px;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 50px;
}

.stdList
{
    padding: 0 25px;
}

.rBoxRight{
    width:80%;
    margin-left:25.3%;
}

.rBoxRight .topImage{
    height: 50%;
    background-position: 0 -65px;
    margin:0px 0px 0 0px;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 50px;
}

.rBoxRight .instructionalArea{
    background-color: #3c3c3c;
    height: 50%;
    margin:0 0px;
    padding: 20px 45px;
    text-align: left;
    color: white;
}


.rBoxRight .instructionalArea p{
    font-size: 1.2em;
}

.navList li{
    cursor: pointer;
}

.navList li:hover{
    color:#bc2426;
}

.adminNav{
    text-align: center;
    padding: 10px;
    margin: 10px;
}

.adminNav li{
    display:inline;
    border: 1px solid black;
    padding: 5px 15px;
    cursor: pointer;
    color:white;
    font-weight: bold;
}
    
   
.invalidField{
    border-color: #F96B6B;
    box-shadow: 0 0 3px #F96B6B
}

.leftInfoLong{
     max-height:70.6%;
}

.leftInfoShort{
     max-height:64%;
}

input[type=checkbox] {
display:none;
}
 
input[type=checkbox] + label
{
background: #fff;
height: 25px;
width: 25px;
display:inline-block;
padding: 0 0 0 0px;
border: 2px solid #333;
margin-bottom:-5px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 25px;
width: 25px;
display:inline-block;
padding: 0 0 0 0px;
border: 2px solid #333;
margin-bottom:-5px;
}

th{
    width: 15%;
}

.navbar-default .navbar-toggle .icon-bar{
    background-color:#333;
}

@media all and (min-width:768px)
{
    .navbar-toggle{
        display:inline;
    }
}

 .navbar-toggle{
        display:inline;
 }

 growl-notifications {
    position: fixed;
    top: 150px;
    right: 10px;
    z-index: 1000;
}

growl-notifications growl-notification {
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 15px 30px;
    width: 200px;
    display: block;
    border-radius: 5px;
    margin-top: 15px;
}