@layer components {

/* =============== DEFAULT TABLE =============== */
table {
  width: 100% !important;
  font-size: var(--font-size-body-sm);     
  border-collapse: collapse;
  margin: var(--spacing-8) 0;            
}

tr {
  border-bottom: 1px solid var(--secondary-color-light-10); 
}

td {
  border: 1px solid transparent;
}

table th {
  background-color: var(--primary-color);         
  color: #fff;
  padding: var(--spacing-2);                            
  margin: var(--spacing-2);                             
}

table tr:nth-of-type(even){
  background-color: var(--secondary-color-light-10);       
}

table tr td{
  padding: var(--spacing-2);                            
}


/* =========== DARK BLUE HEADER TABLE =========== */

table.table-dark-blue {
  border-spacing: 5px 0;
  border-collapse: separate;
  width: 100%;
}

.table-dark-blue td {
  vertical-align: middle;
}

/* header row */
.table-dark-blue tr:first-of-type td {
  background-color: var(--primary-color);
  color: #fff;
  padding: var(--spacing-2); 
  border-radius: var(--radius-md);                  
  vertical-align: middle;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body-sm);                     
  height: 2rem;
  text-align: center;
  border-bottom: 10px solid #fff;
}

/* zebra */
.table-dark-blue tr:nth-of-type(odd) {
  background-color: var(--primary-color-05);
}
.table-dark-blue tr:nth-of-type(even) {
  background-color: #fff;
}

/* footer row */
.table-dark-blue tr:last-of-type td {
  background-color: var(--primary-color);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body-sm);                     
  height: 2rem;
  text-align: center;
  border-top: 10px solid #fff;
}
.table-dark-blue tr:last-of-type  {
  border-top: 10px solid #fff;
}

/* blank helper row */
.table-dark-blue .tr-blank {
  background-color: #fff !important;
  font-size: 0;
  line-height: 0;
}


/* =============== TEST PRICES ARTICLE =============== */

.search-bar {
  height: 2.5rem;
  width: 50%;                         
  margin-left: 50%;                    
  background-color: var(--primary-color-05);
  outline: none;
  border-radius: 30px;
  padding: 0 3rem;
  border: 1px solid #fff;
  background-image: url('/images/icons/icon-search-gray.png');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 15px 8px; 
  font-weight: var(--font-weight-regular);
  color: var(--primary-color);
}

.search-bar::placeholder,
.search-bar::-webkit-input-placeholder,
.search-bar:-ms-input-placeholder {
  font-size: var(--font-size-caption);        
  font-weight: var(--font-weight-regular);
  letter-spacing: .9px;
  color: var(--dark-grey);
  opacity: .9;
}

/* table head background */
.test-prices-article thead tr {
  background-color: var(--dark-color); 
}

/* create spacing below thead */
.test-prices-article thead:after {
  content: "-";
  display: block;
  line-height: .5rem;
  color: transparent;
}

  
.test-prices-article td {
  color: var(--primary-color);
  padding: .5rem;                     
  font-size: 1rem;                     
}

.test-prices-article tr {
  vertical-align: middle;
}

  
.test-prices-article td:nth-child(1) {
  text-align: left;
  text-transform: uppercase;
  display: inline-block;  
  font-weight: var(--font-weight-semibold);
  width: 70% !important;
}

.test-prices-article td:nth-child(1)::before {
  content: '';
  background-image: url('/images/icons/caret-right-solid-dark-blue.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
  display: inline-block;
  transition: all var(--transition-fast);
  margin: 0 .3rem;                    
}

.test-prices-article td:nth-child(1).open::before  {
  transform: rotate(90deg);
  transform-origin: 25% 50%;
}

.test-prices-article td:nth-child(2) {
  display: inline-block;
  font-weight: var(--font-weight-semibold);
  font-size: .85rem;
  text-align: right;
  width: 22% !important;
}

.test-prices-article td:nth-child(2)::after {
  content: " EUR";
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-caption);
}

/* full-width details row */
.test-prices-article td:nth-child(3){
    display: block;
	padding:20px;
  text-align: left;
  width:96% !important;
}

/* =============== RESPONSIVE (desktop -> down) =============== */


@media (max-width: 550px) {
  .test-prices-article td:nth-child(1)::before {
    margin: 0;
  }
}


@media (max-width: 768px) {

  .search-bar {
    width: 100%;
    margin-left: 0;
  }


  .test-prices-article td {
    font-size: 1rem;
    padding: .5rem;
  }

  .test-prices-article td::after{
    font-size: .85rem;
  }
}


@media (max-width: 690px) {
  .table-responsive td {
    display: block;
  }
}

} /* @layer components */