.card {
   width: 100%;
}

.max-vw30 {
   max-width: 370px;
   width: 80%;
}

.fontw-400, .fw-400 {
   font-weight: 400 !important;
}


.fw-700 {
   font-weight: 700 !important;
}

.section .section-title .h1 {
    line-height:36px;
}

.species-modal {
   background-color: white;
   max-width: 800px;
   margin: auto;
   padding: 0 2rem;
}

.species-modal p {
   font-family: Open Sans,sans-serif;
}

.species-modal p strong {
   color: var(--success);
}

.hero-title, .section-title, .text-balance {
   text-wrap: balance;
}

.species-text, .table tbody {
   font-family: Open Sans,sans-serif;
}

.text-link {
   font-size: 16px;
   font-family: Din, sans-serif;
}

.text-none:hover {
   text-decoration: none;
}


.species-text {
   line-height: 1rem;
}

.species-text a {
   font-weight: 500;
   color: #333;
   text-decoration: none;
}


.species-text a:after {
    content: "\f061";
   padding-left: .35rem;
   font-family: Font Awesome\ 5 Free;
   font-size: 12px;
   transform: translateX(0px);
   opacity: 0;
   position: absolute;
   transition:all 0.3s ease-out;
}

.species-text a:hover:after,.species-text a.active:after {
   transform: translateX(5px);
   opacity: 1;
}

.species-text a.active {
   color: var(--blue);
}

.arrow-end:after {
    content: "\f061";
   padding-left: .35rem;
   font-family: Font Awesome\ 5 Free;
   font-size: 12px;
   transform: translateX(0px);
   position: absolute;
   transition:all 0.3s ease-out;
   line-height:1.5rem;
}

.arrow-end:hover:after {
   transform: translateX(5px);
}

.arrow-end.active {
   color: var(--blue);
}

.floater {
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 1212;
   text-align: center;
}

.floater-text {
   font-size: 1.25rem;
   padding-right: 1.25rem;
}

.btn-outline-light-info {
    border-color: #8ccee1;
    color: #8ccee1 !important;
}

.btn-outline-light-info:hover {
   color: #8ccee1 !important ;
}

.species-table thead {
   color: var(--success);
   line-height: 1.25rem;
   
}

.species-table thead th {
  vertical-align:top;
}

.species-box-month-sm {
   min-width: 380px;
   display: flex;
}

.species-box-month-sm span {
   border: 1px solid #e8e8e8;
   width: 1.5rem;
   height: 1.5rem;
   text-align: center;   
   line-height: 1.5rem;
   font-size: .75rem;
   font-weight: 600;
   margin: 0;
   padding: 0;
}
.species-box-month-sm span.selected {
   background: var(--primary);
   color: white
}
.species-calendar-row {
   align-items: center;
}
.species-preview-header {
   width: 350px;
   height: 350px;
   aspec-ratio:1;
   margin-top: 2rem;
   border-radius: 50%;
   background-size: contain;
   background-repeat: no-repeat;
   text-align: center;
   position: relative;

}
.species-preview-text {
   position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    line-height: 1rem;
}

.species-preview-text p { 
   text-shadow: 1px 0px 1px black;
   font-weight: 500;
   color: white;
}

.species-calendar-tpl .table-borderless tbody+tbody,
.species-calendar-tpl .table-borderless td, 
.species-calendar-tpl .table-borderless th, 
.species-calendar-tpl .table-borderless thead th {
    border: 0;
    padding: 15px 7.5px;
}


.showEl {
   cursor: pointer;
}

.targetEl {
   opacity:0;
   height:0;
}
.targetEl.hidden {
   opacity:0;
   height:0;
   
}
.targetEl.show {
   opacity:1;
   height: 350px;
   
}

#speciesAccordion {
    max-width: 90%;
    margin: auto auto auto 10%;
}

@media only screen and (min-width: 1199px) {
  .species-preview-header {
   width: 500px;
   margin-top:0;
  }
  .targetEl.show {
      height: 500px;
      
   }
      
   #speciesAccordion {
       max-width: 100%;
       margin: auto auto auto auto;
   }
}

.accordion-line .card .card-header {
   cursor: pointer;
   display: flex;
   justify-content: space-between;
}
.accordion-line .card .card-header:after {
    content: "\f067";
    height: 20px;
    width: 20px;
    display: inline-block;
    align-self: center;
    justify-self: self-end;
    font-family: Font Awesome\ 5 Free;
    color:var(--blue);
}

.accordion-line .card .card-header:has(+ .show):after {
   content:none;
}

.accordion-line .card .card-header h3 {
   margin-bottom:16px;
}
.accordion-line .card .card-header:has(+ .show) {
    border-bottom-color: transparent;
}
.accordion-line .card .card-header {
    border-bottom: 1px solid #002A3A;
}

.species-img-sm {
    position: absolute;
    max-width: 60px;
    transform: translateX(-80px);
}

#scroll-up {
    bottom: 100px;
}



@media (max-width: 767.98px) {
   
   section#calendar {
       max-width: 100vw;
       width: 100%;
       padding: 20px;
       margin: 0;
   }
   
   .species-img-sm {
       position: absolute;
       max-width: 50px;
       transform: translateX(-65px);
   }
   
   
   #speciesAccordion {
       width: 100%;
       max-width: 75vw;
       padding: 0 30px;
       margin: 0;
       padding: 0;
   }
   
   #speciesAccordion .card {
       display: flex;
       width: 100%;
       margin: 20px;
       margin-inline-start: 50px;
       padding: 0;
       flex-direction: column;
       justify-content: center;
   }
   
   #speciesAccordion .card .collapse.show {
       width: 90vw;
       display: flex;
       flex-direction: column;
       margin: 0;
       margin-inline-start: -70px;
   }
   
   #speciesAccordion .card-body {
       display: flex;
       flex-direction: column;
       margin: 0;
       display: block;
       width: 100%;
       max-width: 100vw;
   }
   
   #speciesAccordion .table-responsive {
       /* display: table; */
       ];
       width: 100%;
       overflow-x: scroll;
   }
   
   #speciesAccordion .table-responsive table {
       display: table;
   }
   
   #speciesAccordion .table-responsive table.species-table {
       max-width: 100vw;
   }
   
   #speciesAccordion .table-responsive table.species-table thead th {
       vertical-align: top;
       min-width: 150px;
   }
   
   .arrow-end:after {
      position: unset !important;
   }


}