/* Breadcrumbs */

.breadcrumb-panel-section
{

  background-color: #fff;


  margin-top: 48px;

  padding: 48px;

  

}

.breadcrumb-menu-item
{
  color: #2217bf;
  font-size: 16px;
  font-weight: bold;
  cursor:pointer;

  display: inline-block;

  text-overflow: ellipsis;
}

.breadcrumb-menu-item::hover
{
  color:#0C0840;
}


.breadcrumb-menu-item::after
{
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 24px;
  height: 24px;

  background-image:url('../images/icons/chevron-forward-grey.svg') ;

  background-size: 24px 24px;

  background-repeat: no-repeat;

  margin-left: 24px;
  margin-right: 24px;

  color:grey;
  
}

.breadcrumb-menu-item.active::after
{
  display: none;
}

.breadcrumb-menu-item.active

{
  color: #7e7e7e;


}


/* Date Selection   */

.main-tabs-wrapper
{
  display: flex;
  justify-content: flex-start;

  gap:16px;

  margin-bottom: 24px;

}

.main-tab-button
{
  background-color: transparent;
  color:#000;

  font-weight: bold;
  border: 0px;
  outline:0px;

  font-size: 18px;
  line-height: 24px;
  padding-bottom: 8px;

  cursor: pointer;

  transition: all 0.2s linear;
  border: 2px solid transparent;
}
.main-tab-button.active
{
  color: #2217bf;
  
  border-bottom: 2px solid #2217bf;
}
.main-tab-button:hover
{
  color: #757575;
  
}
.panel-date-selection-grid
{

    width: 476px;

    max-width: 100%;


  display: grid;
  grid-template-columns: repeat(14, 1fr);

  gap:4px;

}
.panel-date-selection-box
{

  border:1px solid #000;
  padding: 8px 16px;
   
  background-color: #b3f33c;
  border-radius: 4px;

  color: #000;


  display: flex;
  justify-content: space-around;

  align-items: center;

  position: relative;

  grid-column: span 7;

}

.panel-date-selection-box-icon
{

  display: inline-block;
 
  margin-left: 16px;
    

    background-color: #fff;
    border: 1px solid rgb(154, 241, 53);

    border-radius: 4px;

    width: 48px;
    height: 48px;
 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    cursor: pointer;

    box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.18), -4px -4px 8px 0px rgba(0,0,0,0.18) ;

}

.panel-date-selection-box-icon img

{
  width: 24px;
  height: 24px;
transform: rotate(0deg);
    transition: transform 0.2s linear;
  
}

.panel-date-selection-box-icon.showdropdownbox img
{
  transform: rotate(180deg);
}

.panel-date-selection-options-box
{
  width: 100%;
  padding: 24px;
  background-color: #fff;

  position: absolute;
  top: 100%;
  left:0px;


  box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.15), -8px -8px 8px 0px rgba(0,0,0,0.15);

}

.panel-date-selection-options-box ul
{
 padding: 0px;
 margin: 0px;
 list-style-type: none;
}

.panel-date-selection-options-box .option-block
{

  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding:12px 0px ;

  border-bottom:1px solid #e6a9a9 ;

  cursor: pointer;


  font-size:16px;

  line-height:20px;

  color:blue;
  

}

.panel-date-selection-options-box .option-block  .selected-icon img
{

 display: none;
 width: 24px;
 height: 24px;



}
.panel-date-selection-options-box .option-block.active  .selected-icon img
{

 display: inline-block;


 

}
.panel-date-selection-options-box option:last-of-type
{
  border-bottom:0px solid #e6a9a9 ;

}



.panel-date-dayslist-wrapper
{
  display: grid;

  grid-template-columns: repeat(14, 1fr);
  
  gap: 4px;

  width: 476px;

  background-color: transparent;


  
}


.panel-date-dayslist-wrapper .panel-date-chip-item-day
{

  border: 1px solid #000;
grid-column: span 2;

 border-radius: 4px;

  text-align: center;

  width:64px;
  height: 48px;

  background-color: #fff;

  box-shadow: -4px -4px 8px 0px rgba(0, 0, 0, 0.4);

  cursor: pointer;


}

.panel-date-dayslist-wrapper .panel-date-chip-item-day.active
{

  background-color: #0c0b16;
  color:#fff;

}


.panel-date-dayslist-wrapper-mobile
{
  display: none;

  grid-template-columns: repeat(62, minmax(24px, 1fr));
  
  gap: 12px;

  width: 100%;

  background-color: #fff;

  overflow-x: scroll;

  padding: 12px 8px;

  
}


.panel-date-dayslist-wrapper-mobile .panel-date-chip-item-day-mobile
{

  
grid-column: span 2;

 border-radius: 4px;

  text-align: center;

  width:100%;
  height: 48px;

  background-color: #fff;

  box-shadow: -4px -4px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.15);

  cursor: pointer;


}

.panel-date-dayslist-wrapper-mobile .panel-date-chip-item-day-mobile.active
{

  background-color: #0c0b16;
  color:#fff;

}

/* Quiz Listing */

.result-panel-section
{
      padding: 48px;

}
.quiz-panel-section
{
      padding: 48px;

}

.panel-section
{
    padding: 48px;

        background-color:#fff;
background-image: radial-gradient(#ddd 1px, transparent 1px);
  
  /* The Gap: Controls how far apart the dots are grid-wise */
  background-size: 24px 24px;

}


.panel-section .section-container
{
  padding: 48px;

  background-color: #fff;
  box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.15);

  border-radius: 12px;
}


.panel-listing-title
{

    font-size: 32px;
    line-height: 48px;
    font-weight: bold;

    color: #0c0d16;

    position: relative;
}

.panel-title-dropdown-box-icon
{
  display: inline-block;
 
  margin-left: 16px;
    

    background-color: #fff;
    border: 1px solid rgb(154, 241, 53);

    border-radius: 4px;

    width: 48px;
    height: 48px;
 
    text-align: center;

    cursor: pointer;

}



.panel-title-dropdown-box-icon img

{
  width: 24px;
  height: 24px;
transform: rotate(0deg);
    transition: transform 0.2s linear;
  
}

.panel-title-dropdown-box-icon.showtimeperiodoptionsbox img
{
  transform: rotate(180deg);
}

.panel-timeperiod-options-box
{
  width: 400px;
  padding: 24px;
  background-color: #fff;

  position: absolute;
  top: 100%;
  left:0px;


  box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.15), -8px -8px 8px 0px rgba(0,0,0,0.15);

}

.panel-timeperiod-options-box ul
{
 padding: 0px;
 margin: 0px;
 list-style-type: none;
}

.panel-timeperiod-options-box .option-block
{

  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding:12px 0px ;

  border-bottom:1px solid #e6a9a9 ;

  cursor: pointer;


  font-size:16px;

  line-height:20px;

  color:blue;
  

}

.panel-timeperiod-options-box .option-block  .selected-icon img
{

 display: none;
 width: 24px;
 height: 24px;



}
.panel-timeperiod-options-box .option-block.active  .selected-icon img
{

 display: inline-block;


 

}
.panel-timeperiod-options-box option:last-of-type
{
  border-bottom:0px solid #e6a9a9 ;

}

.date-tabs-container
{
 
}


.date-tabs-wrapper

{
  display: flex;
  flex-wrap: wrap;
  gap:16px;


}

.date-tab-chip-btn
{
  cursor: pointer;
  display: inline-block;

  outline: 0px;
  border: 2px solid #000;
  padding: 8px 16px;

  border-radius: 16px;

  background-color: #fff;

  color: #2217bf;

  min-width: 200px;

}

.date-tab-chip-btn.active
{

  background-color: #2217bf;

  color: #fff;

  font-weight:bold ;

}



/* Tabs */

.panel-listing-tabs-wrapper
{
    display: flex;
    gap:16px;
    max-width: 100%;

    justify-content: flex-start;
    align-items: center;

    margin-top: 24px;
    /* overflow-x: scroll; */

}

.panel-listing-tab-item
{
   
    display: inline-block;
    font-size: 14px;
    line-height: 24px;

    color: #000;

}

.panel-listing-tab-item.active
{
    color: #4A6AF7;

    border-bottom: 2px solid #4A6AF7;

}


/* Listing Container */

.panel-listing-container
{
    border-radius: 24px;
    border: 1px solid #8d8c8c;


    background-color: #fff;

    padding: 24px 24px;

    max-width: 100%;

    max-width: 800px;

    margin-top: 48px;

    box-shadow: -8px -8px 8px 0px rgba(0,0,0,0.15), 8px 8px 8px 0px rgba(0,0,0,0.1), -8px 0px 0px 0px #b3f33c;
}

.panel-list-wrapper
{
  list-style-type: none;
  padding:0px;
  margin:0px;

}

.panel-list-item-card
{
  padding: 24px;

  display: block;
}

.panel-list-item-card-title
{
  color: #000;
  font-size: 24px;
  line-height: 36px;

  font-weight: bold;

  margin: 0px;
}

.panel-list-item-card-details-row
{
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.panel-list-item-card-details-item
{

 color: #5045F5;
 font-size: 14px;
 line-height: 24px;
 display: inline-block;

 margin-top: 24px;

}
.panel-list-item-card-details-item .label
{

 color: #5045F5;
 font-size: 14px;
 line-height: 24px;

}

.panel-list-view-button
{
    display: inline-block;
    background-color: #0A5BAB;
    border-radius: 12px;
    padding: 4px 24px;

    color: #fff;

    font-size: 14px;
 line-height: 24px;

 font-weight: bold;

 border: 0px;
 outline:0px;

 cursor: pointer;
}
.panel-list-view-button::hover
{
   border: 0px;
 outline:0px; 
     background-color: #053768;

}
.panel-h-spacer
{
    margin-left: auto;
    margin-right: auto;
}

.panel-list-divider
{
    width: 100%;
    height: 2px;
    background-color: #fff;

     background-color:#899ae9;

    margin-top: 24px;
}



/* Screening Types Page */



.panel-allscreenings-section
{
  background-color: #99e332;

  background-color: #fff;
      border-top: 8px solid #a487d5;
}

.panel-allscreenings-title
{
    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
}


.panel-allscreenings-wrapper
{
    padding: 24px;

    display: grid;
  
    grid-template-columns: repeat(12, minmax(10px, 1fr));

    max-width: 1200px;

    gap:16px;
}

.panel-allscrenings-list-card
{

    grid-column: span 6;
    border: 1px solid #524F4F;
    border-radius: 24px;
    padding: 24px;

    margin-top: 24px;
    box-shadow: 4px 4px 0px 0px rgb(50, 253, 94);

}

 .panel-allscrenings-list-card-row .list-card-screening-title

    {
      width: 100%;
    }

    .panel-allscrenings-list-card-row .list-card-screening-view-button

    {

        margin-top: 24px;
    }


.panel-allscrenings-list-card-row

{
 display: flex;
 align-items: center;
 justify-content: flex-start;

 flex-wrap: wrap;

 margin-top: 24px;
 margin-bottom: 24px;
}

.list-card-screening-title
{
  font-size: 20px;
  line-height: 24px;

  color: #000000;
  font-weight: bold;
}

.list-card-screening-view-button
{
  background-color: #434445;
  color:#fff;
  border-radius: 12px;
  padding: 12px 24px;
  
  border: 0px;
  outline: 0px;

  box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: all 0.5s linear;
}
.list-card-screening-view-button:hover
{
  background-color: #060608;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);

}


@media (max-width:864px)  { 

  .panel-section
  {
    padding: 48px 8px;
  }
  .panel-section .section-container
{
  padding: 48px 24px;

}

.date-tabs-container
{
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 80px;
  padding: 8px 0px;
}


.date-tabs-wrapper

{
  display: flex;
  flex-wrap: nowrap;
  gap:16px;


}

.date-tab-chip-btn
{
flex: 1 1 1;
}


  .result-panel-section
{
      padding: 12px;

}
.quiz-panel-section
{
      padding: 12px;

}

.panel-allscreenings-wrapper

{
  padding: 8px;
}

.panel-allscrenings-list-card
{

    grid-column:  span 12;
    border: 1px solid #524F4F;
    border-radius: 24px;
    padding: 24px;

    margin-top: 24px;

    box-shadow: 8px 8px 0px 0px rgb(50, 253, 94);

}

  .panel-date-dayslist-wrapper
{
  display: none;

}

 .panel-date-dayslist-wrapper-mobile
{
  display: grid;

}

    .panel-list-item-card-details-row
    {
        gap:0px;
              margin-top: 24px;

    }


    .panel-list-item-card-details-item

    {
      width: 100%;
              margin-top: 8px;

    }

    .panel-list-view-button

    {
         margin-top: 8px;
    }

    .panel-allscrenings-list-card-row .list-card-screening-title

    {
      width: 100%;
    }

    .panel-allscrenings-list-card-row .list-card-screening-view-button

    {

        margin-top: 24px;
    }

}