/*********************************/
/************COMPONENT************/
/*******DYNAMIC LIST LIBRARY******/
/***************CSS***************/
/*********************************/


/*********************************/
/*************GLOBAL**************/
/*********************************/

/*filter options*/
.dll-customer-option {border: none; padding: 0; margin-bottom: 5rem;}
.dll-filter-section {float: none;}
.dll-filter-dropdowns {position: relative; margin-bottom: 5rem;}
.dll-filter-dropdowns:after {
    font-family: 'truist-icons';
    content: '\e80c';
    font-size: 2rem;
    position: absolute;
    top: 0;
    right: 2rem;
    color: #707070;
    pointer-events: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dll-filter-items {
    /* remove default arrow*/
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;

    border-radius: 4px;
    border: 1px solid #707070;
    padding: 2rem 6rem 2rem 2rem;
    height: auto; 
    width: 100%; 
    margin: 0; 
    font-size: 1.8rem; 
    color: #707070;}
.dll-filter-items::-ms-expand{ display: none;} /* remove default arrow for IE */

/*reset*/
.apply-reset-button {display: flex; width: 100%; flex-wrap: wrap;}
.apply-reset-button input {font-size: 2rem; padding: 1.55rem 3rem; margin: 0; border: 2px solid #2E1A47; background: transparent; color: #2E1A47; border-radius: 4px;}
.apply-reset-button input:hover,
.apply-reset-button input:focus {background: #2E1A47; color: #fff;}
.apply-reset-button input:nth-child(2) {border: none; text-decoration: underline; color: #707070;}
.apply-reset-button input:nth-child(2):hover,
.apply-reset-button input:nth-child(2):focus {background: none; text-decoration: none;}

/*pagination*/
.dll-pagination-container {margin-top: 0;}
.dll-pagination-container .text-center ul.pagination,
.dll-pagination-container ul.pagination {display: flex; align-items: center; justify-content: center; font-size: 1em; margin: 2.5rem auto;}
ul.pagination li.disabled, /*hack*/
ul.pagination li, /*hack*/
.pagination li {flex: 1; display: flex; align-items: center; justify-content: center; width: auto; max-width: 3.8rem; /*hack*/}
ul.pagination li.active span.current, /*hack*/
.pagination li.active span.current,
.pagination li span,
.pagination li a.page-link {padding: .5rem; position: relative; display: flex; align-items: center; justify-content: center; border: 0; text-decoration: none; font-size: 1em; line-height: 1em;}
.pagination li a.page-link:hover {color: #7c6992;}
.pagination li a.page-link:focus {color: #2E1A47; outline: 1px solid;}
ul.pagination li a {color: #2e1a47;}
ul.pagination li.active span.current::after,/*hack*/
.pagination li.active span.current::after,
.pagination li a.page-link:hover::after,
.pagination li a.page-link.prev:hover::after,
.pagination li a.page-link.prev:focus::after,
.pagination li a.page-link.next:hover::after,
.pagination li a.page-link.next:focus::after {width: 2px; height: 100%;}
.pagination li a.page-link.prev:hover::after,
.pagination li a.page-link.prev:focus::after {margin-left: 2.6rem;}

/*first last*/
.pagination li.disabled:first-child,
.pagination li.disabled:last-child,
.pagination li:first-child,
.pagination li:last-child {display: none;}
/*prev next arrows*/
.pagination li a.page-link.next,
.pagination li span.next,
.pagination li a.page-link.prev,
.pagination li span.prev {font-size: 0;}
.pagination li a.page-link.next::before,
.pagination li span.next::before,
.pagination li a.page-link.prev::before,
.pagination li span.prev::before {font-family: FontAwesome; content: '\f107'; font-size: 2.8rem;}
.pagination li a.page-link.next,
.pagination li span.next {transform: rotate(-90deg);}
.pagination li a.page-link.prev,
.pagination li span.prev {transform: rotate(90deg);}

/**error message**/
.dll-noresults-message {color: #707070; font-size: 1.8rem; text-align: left;}

/*flex children*/
.dll-container.my-1 div.tombstone-container,
.dll-container.my-1 div.grid-container,
.dll-container.my-2 div.tombstone-container,
.dll-container.my-2 div.grid-container,
.dll-container.my-3 div.tombstone-container,
.dll-container.my-3 div.grid-container,
.dll-container.my-4 div.tombstone-container,
.dll-container.my-4 div.grid-container,
.dll-container.my-5 div.tombstone-container,
.dll-container.my-5 div.grid-container,
.dll-container.my-6 div.tombstone-container,
.dll-container.my-6 div.grid-container {width: 100%; padding: 0; margin: 4.167% 0;}

/*tablet*/
@media (min-width: 768px){
    /*filter options*/
    .dll-filter-section {display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
    .dll-filter-dropdowns {margin-right: 4.167%; flex: 1;}
    .dll-filter-dropdowns:nth-child(2) {margin-right: 0;}
    /*pagination*/
    .dll-pagination-container ul.pagination {margin: 5rem auto;}
    /*flex parents*/
    .dll-container {margin: 0 -2.08%; width: auto;}
    .dll-inner-container,
    .card-deck {display: flex; flex-wrap: wrap; width: 100%;}
    /*flex children*/
    .dll-container.my-2 div.tombstone-container,
    .dll-container.my-2 div.grid-container,
    .dll-container.my-3 div.tombstone-container,
    .dll-container.my-3 div.grid-container,
    .dll-container.my-4 div.tombstone-container,
    .dll-container.my-4 div.grid-container {width: calc((100%/2) - 4.167%);  margin: 4.167% 2.08%;}
    .dll-container.my-5 div.tombstone-container,
    .dll-container.my-5 div.grid-container,
    .dll-container.my-6 div.tombstone-container,
    .dll-container.my-6 div.grid-container {width: calc((100%/3) - 4.167%);  margin: 4.167% 2.08%;}
}
/*desktop*/
@media (min-width: 1200px){
    /*filter options*/
    .dll-filter-section {flex-wrap: nowrap;}
    .dll-filter-dropdowns {margin-bottom: 0;}
    /*reset*/
    .apply-reset-button {width: auto; margin: 0 0 0 4.167%;}
    /*pagination*/
    .dll-pagination-container ul.pagination {margin: 7.5rem auto;}
    /*flex children*/
    .dll-container.my-3 div.tombstone-container,
    .dll-container.my-3 div.grid-container {width: calc((100%/3) - 4.167%);}
    .dll-container.my-4 div.tombstone-container,
    .dll-container.my-4 div.grid-container {width: calc((100%/4) - 4.167%);}
    .dll-container.my-5 div.tombstone-container,
    .dll-container.my-5 div.grid-container {width: calc((100%/5) - 4.167%);}
    .dll-container.my-6 div.tombstone-container,
    .dll-container.my-6 div.grid-container {width: calc((100%/6) - 4.167%);}
}

/*********************************/
/***********TOMBSTONES************/
/*********************************/
.tombstone-container {}

/**transactions**/
.dll-transactions .tombstone-container {position: relative; padding: 5rem 8.334% 7.5rem; background: transparent; border: none; border-bottom: 1px solid #c9c9c9;}
.dll-transactions .tombstone-card-title {position: absolute; top: 0; font-weight: 400; color: #7C6992; font-size: 2rem; margin: 0 -8.334%; text-align: center; width: 100%;}
.dll-transactions .tombstone-photo {height: 10rem; display: flex; align-items: center; justify-content: center;}
.dll-transactions .tombstone-desc {padding: 0; min-height: auto;}
.dll-transactions .tombstone-photo img {width: auto; height: 100%;}
.dll-transactions .tombstone-card-description {margin: 2.5rem 4.167%; text-align: center; font-size: 1.8rem;}
.dll-transactions .tombstone-list-item {margin: 2.5rem 4.167%; text-align: center; padding-left: 0; color: #7C6992; font-size: 2rem; list-style: none;}
.dll-transactions .published-date {margin: 5rem 4.167% 0; padding: 0; text-align: center; position: static; font-size: 1.8rem;}

/*tablet*/
@media (min-width: 768px){
    /**transactions**/
    .dll-transactions .tombstone-container {margin: 7.5rem 0; padding: 10rem 4.167%; border-bottom: none;}
    .dll-transactions .tombstone-container:nth-child(2n) {border-right: none;}
    .dll-transactions .tombstone-card-title {top: 5rem; left: 0; margin: 0; font-size: 2rem;}
    .dll-transactions .tombstone-desc {display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .dll-transactions .tombstone-card-description {flex: 1 1 auto; width: 100%; min-height: 16rem;}
    .dll-transactions .tombstone-list-item {font-size: 2rem; margin: 0; width: 100%;}
    .dll-transactions .published-date {position: absolute; bottom: 5rem; left: 0; width: 100%; margin-right: 0; margin-left: 0;}
}
/*desktop*/
@media (min-width: 1200px){
    /**transactions**/
    .dll-transactions .tombstone-container {margin: 7.5rem 0;}
    .dll-transactions .tombstone-container:nth-child(2n) {border-right: 1px solid #c9c9c9; border-left: 1px solid #c9c9c9; margin-left: 0; margin-right: 0; width: calc(100%/3);}
    .dll-transactions .tombstone-card-title {font-size: 2.4rem;}
    .dll-transactions .tombstone-list-item {font-size: 2.4rem;}
}

/*********************************/
/************* GRID **************/
/*********************************/
.grid-container {padding: 0; margin: 0;}
.grid-container a {display: block; padding: 8.334%; background: #2E1A47; text-decoration: none; color: #fff; transition: all .2s ease-in-out; height: 100%; width: 100%;}
.grid-container a:hover {transform: scale(1.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); color: #fff;}
.grid-container .article-title {font-size: 2.4rem; color: #b0e0e2; margin-bottom: 7.5rem;}
.grid-container .article-summary {font-weight: 300;}
.grid-container .article-summary p {}
/*Research DLL Specific Grid Layout*/
.dll-research-grid .grid-container .article-summary {display: none;}
.dll-research-grid .grid-container .article-title {margin-bottom: 0;}
/*tablet*/
@media (min-width: 768px){
    /**transactions**/
    .grid-container {}
    .grid-container:nth-child(2n) {}
    .grid-container .article-title {}
    .grid-container .article-summary {}
    .grid-container .article-summary p {}
}
/*desktop*/
@media (min-width: 1200px){
    /**transactions**/
    .grid-container {}
    .grid-container:nth-child(2n) {}
    .grid-container:nth-child(3n) {}
    .grid-container .article-title {}
    .grid-container .article-summary p {}
}

/*mobile*/
@media (max-width: 767px){
    /**filter**/
	.apply-reset-button input {width: 100%;}
}
	