.css_item p.css_description{
    font-size: 80%;
}

.css_item .card-body{
    height: 6lh;
    background-color: var(--purple);
    mask-image: linear-gradient(0deg, rgba(0,0,0,0.95) 0%,  rgba(0,0,0,0.98) 50%, rgba(0,0,0,1) 100%);
    margin-top: -1px;
}

.css_image{

    opacity: 0.6;
    object-fit: cover;
    width: 100%;
    height: 200px;

}

.css_id{
    display: none;

}

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

div.css_item{
    margin: 0rem;
    max-width: 25rem;
    border: 4px solid #f00;
    transition: transform 0.2s ease;
    /* background-color: var(--purple); */
    background-size: cover;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    border-radius: 5%;
    overflow: hidden;
 -webkit-box-shadow:inset 0px 0px 3px 5px var(--purple-tint);
  -moz-box-shadow:inset 0px 0px 3px 5px var(--purple-tint);
  box-shadow:inset 0px 0px 3px 5px var(--purple-tint);
 }


.css_item:hover  {
  background-color: var(--primary) !important;
  transform: scale(1.05);
  box-shadow: 0 16px 20px rgba(0,0,0,.28), 0 0 16px rgba(0,0,0,.25) !important;
 -webkit-box-shadow:inset 0px 0px 3px 5px var(--purple-tint);
  -moz-box-shadow:inset 0px 0px 3px 5px var(--purple-tint);
  box-shadow:inset 0px 0px 3px 5px var(--purple-tint);


}

.css_item:hover .card-header, .css_item:hover .card-body, .css_item:hover .card-footer {
    background-color: var(--primary-tint) !important;

}


#css_search_results{
    margin-top: 2rem;
}
#css_search_results>div.css_item:nth-child(3n) {
    border-color: var(--green);
}
#css_search_results>div.css_item:nth-child(3n+1) {
    border-color: var(--orange);

}
#css_search_results>div.css_item:nth-child(3n+2) {
    border-color: var(--pink);

}

.css_title{

    width: 100%;
    text-align: center;


    font-size: 80%;


    justify-content: center;

    margin: 0px;
}


/* div.css_image_container{ */
/*     mask-image: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(55,55,55,0.5) 20%, rgba(0,0,0,0.2) 80%); */
/*     /\* linear-gradient(to top, rgba(0, 100, 0, 1.0) , rgba(0, 0, 0, 0.0) ); *\/ */
/*     float: left; */

/* } */
.css_item .card-header, .css_item .card-footer{
    background-color: var(--purple-tint);

}

.css_area, .css_title, .css_description{
    color: var(--white);
}

.css_title{
    margin-bottom: 0.75rem;
    font-size: 100%;
}

.css_description{
    text-align: left;
}

div.esn-area-block{
    margin-bottom: 2rem;
    background-color: rgba(0,10,40,0.25);
    border-radius: 20px;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0px;
    margin-top: 2rem;
}

div.esn-area-block > h3{
    margin-top: 0rem;
    text-decoration: underline;
    padding: 0.5rem;
    padding-left: 1rem;
}
div.esn-area-block > p{
    padding: 0.5rem;
    padding-left: 1.5rem;
}


 dl.css-info {
     /* border: 3px solid var(--primary); */
     background: var(--purple-tint);
     padding: 0.5em;
    margin: 0px;
 }
.css-info  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;
    color: var(--yellow);
  }
.css-info   dt::after {
    content: ":";
  }
.css-info   dd {
    margin: 0 0 0 110px;
    padding: 0 0 0 0;
  }



 dl.css-notes {
     /* border: 3px solid var(--primary); */
     background: var(--indigo-tint);
     padding: 0.5em;
    margin: 0px;
 }
.css-notes  dt {


    font-weight: bold;
    color: var(--yellow);

  }
.css-notes  dd {

    padding: 0 0 0 0;
    padding-left: 2rem;
  }

/* .item { */
/*    /\* other properties *\/ */
/*    margin-top: 10px; */
/*    border-top: 1px solid black; */
/*    padding-top: 10px; */
/* } */

/* .item:first-child { */
/*    margin-top: 0; */
/*    border-top: none; */
/*    padding-top: 0; */
/* } */

span.css_level, span.css_focus{
    display: block;
    border-radius: 20px;
}

.css-search-form .row{
    margin-bottom: 2rem;
}
.css-preview{
    margin-top: 3em;
    padding-top: 3rem;
    border-top: 2px solid var(--orange);

}
.qual-col,.obj-col, .course-col{
    padding: 1.5rem;
}

.obj-col, .course-col{
    background: var(--purple-tint-mild);
}

.qual-col{

    background: var(--primary-tint-mild);
}

.css-preview-row h3{
    margin-top: 0;
    padding-top: 0;
}