/* begin card css */
.card-container {
    transition: all .25s ease-in-out;
    padding-top: 20px;
    padding-bottom: 20px;

}

.card-container:hover .card {
    /* margin-top: -10px; */
    /* box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .5); */
    /* transition: all .25s ease-in-out; */
    /* margin-bottom: 10px; */
}
.card-container.organization .card-img { background-color:#FFF; background-size: 70%; }
.card {
    background: linear-gradient(#F3F6F4 20%, #FFF);
    transition: all .25s ease-in-out;
    border: 1px solid rgba(0, 0, 0, .05);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 20px; overflow: hidden;
}
.card:hover { 
    transform: scale(1.025);
}

.card-body {
    padding: 30px 30px 30px;
    border-bottom: 10px solid #FFFFFF;
    min-height: 277px;
    position: relative;
    width: 100%;
}

.card-img {
    background-color: #EEE;
    display: block;
    padding-bottom: 55%;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
}



.card-title {
    margin: 5px 0 15px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #0c6d6e;
    text-decoration: none !important;
    line-height: 1.4em;
}

.card-title:hover {
    text-decoration: underline;
}

.card-type {
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px;
}

.card-type i {
    font-size: 17px;
    vertical-align: middle;
    margin-right: 3px;
}

.card-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 1.4em;
    font-weight:400;
}

.card-tags {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: -10px;
    margin-top: 20px;
}

.card-tags li {
    display: none;
    margin: 3px;
    background-color: #EEE;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
}

.card-tags li.resource-tag-active {
    display: inline-block;
}

.recommended {
    position: absolute;
    top: 20px;
    right: 30px;
    background-color: #f7cb5a;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.card-author {
    position: absolute;
    bottom: 0px;
    right: 0px;
	padding: 10px 30px;
	border-radius: 20px 0 0 0;
    font-size: 12px;
}
.card-author a { 
	color: #999!important; 
}

.card-container.guide .card-body {
	min-height: 450px;
	vertical-align: baseline; 
display: flex;
flex-basis: auto;
flex-direction: column;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: nowrap;
	justify-content: flex-end;
	border: 0; 
    background-color: transparent !important;
}
.card-container.guide .card-type {
	color: #FFF !important; 
	 z-index: 2;
	position: relative; 
		border: 0; 

}
.card-container.guide .card { 
	border: 0; 
}
.card-container.guide .card-body h3 { margin: 0; max-width: 290px; }
.card-container.guide .card-body h3 a { color: #FFF; z-index: 2; position: relative; font-size: 130%; margin: 0; }
.card-container.guide .card-body::before {
	background-image: linear-gradient(180deg, var( --e-global-color-04be8c1 ) 47%, var( --e-global-color-text ) 100%);
	    content: "";
    display: block;
    position: absolute;
	top: 0;
	left: 0; 
	right: 0;
	bottom: 0;
	z-index: 1;
}
/* end cards */


/* user preferences menu */

.user-prefs-container { 
}
#user-prefs {
    display: flex;
    flex-direction: row; 
    gap: 0px; 
    font-family: Arial; 
    white-space: nowrap;
}

#user-prefs .user-col {
    padding: 10px 70px 10px 20px; 
    position: relative; 
    border-left: 1px solid rgba(255,255,255,.2);
    min-width: 270px;
    display: flex;
    flex-direction: row; 
    gap: 10px; 
    cursor: pointer;
    z-index: 21;
}
#user-prefs .user-col#region { 
	min-width: 300px; 
}
#user-prefs .user-col#language { 
	min-width: 200px; 
}
#user-prefs .label-container { color: #FFF; }
#user-prefs .fa-chevron-down { 
    position: absolute; 
    top: 30px;
    right: 10px; 
}
#user-prefs .icon { 
    font-size: 25px;
    padding-top:3px;
	color:#FFF;
}
#user-prefs .icon i {  text-align:center; }
#user-prefs .user-col.active { 
    background-color: #FFF;
}
#user-prefs .user-col.active .user-label,
#user-prefs .user-col.active .user-selected,
#user-prefs .user-col.active .icon,
#user-prefs .user-col.active .fa-chevron-down 
{ 
    color: #000; 
}

#user-prefs .user-label {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255,255,255,.5);
}

#user-prefs .user-selected {
    font-size: 16px; 
    font-weight: 600;
}

#user-prefs .select-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    background-color: #FFF;
    width: 300px; 
    padding: 10px 30px 20px 30px;
    box-shadow: 0px 10px 10px -5px rgba(0,0,0,.25);
}
#user-prefs .select-box input { display: none; }
#user-prefs .select-box label { display: block; }
#user-prefs .select-box span { 
    display: inline-block;
    color: #000;
    border-bottom: 2px solid transparent;
}
#user-prefs .select-box label.selected { font-weight: 600; }
#user-prefs .select-box label.selected span { border-color: #666; }
#user-prefs .select-box label:hover span { 
    border-bottom: 2px solid #666;
}

#user-prefs .select-box label {
    margin: 0;
    padding: 5px 0;
    list-style: none; 
    
}
#user-prefs-saved i {
    font-size: 17px; 
    margin-right: 5px;
} 
#user-prefs-saved { 
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    padding: 10px;
    background-color:#245E97;
    color: #FFF;
    text-align: center;
    z-index: 9;
    display:none;
    border-radius: 0px; 
    font-size: 15px;
}
#mobile-prefs { display: none; }
.save-close { display: none; }
/*#mobile-prefs { display: none; }*/
@media (max-width: 1100px) {
    #mobile-prefs { 
        color: #FFF; 
        display: inline-block; 
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        padding: 10px 20px;
        position: absolute;
        top: -8px;
        left: 0;
        z-index: 22;
    }
    #mobile-prefs:active, #mobile-prefs:focus { border: 1px solid red; }
    #mobile-prefs i { font-size: 16px; }
    #user-prefs { 
        display: none; 
        z-index: 21; 
        background-color: #072235; 
        position: fixed;
         top: 0;
          left: 0; 
          right: 0; 
          bottom: 0; 
          padding-top: 50px;
      }
      #user-prefs .select-box {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        display: block;
        padding: 0px 0px 0px 50px;
        box-shadow: none;
      }
      #user-prefs .user-col { 
          flex-direction: column; 
          padding: 20px 70px 20px 20px;
          border-bottom: 1px solid rgba(255,255,255,.2);
          border-left: 0;
      }
      #user-prefs .user-col .label-container {
            padding-left: 50px;          
      }
      #user-prefs .user-col .icon { 
          position: absolute;
          top: 17px; 
          left: 20px; 
      }
      #user-prefs .fa-chevron-down {
          top: 27px;
      }
      #user-prefs-saved {
          top: 49px;
      }
      .save-close { 
          display: block;
          padding: 20px;
      }
      .save-close a {
          display: block;
          text-align: center;
          padding: 5px 15px;
          background-color:#23AC9A;
          border-radius: 3px;
          text-decoration: none !important;
          color:#FFF !important;
          font-size: 16px;
          font-weight: 600;
      }
       .card-container { width: 100% !important; }
       .resource-slide-container { padding: 0px !important; }
       .resource-slide { padding: 0 !important; }
       .slider-arrow.prev-arrow { left: -30px !important; }
       .slider-arrow.next-arrow { right: -30px !important; }
              
       
}
/* Resource details page */ 

.resource-body h2 { margin-top: 50px; margin-bottom: 10px; font-family: "Noto Sans" !important; font-weight: 600 !important; font-size: 30px !important;}
.resource-body h3 { margin-top: 30px; margin-bottom: 10px;  font-family: "Noto Sans" !important; font-weight: 600 !important; font-size: 24px !important; }
.resource-body h4 { margin-top: 30px; margin-bottom: 10px;  font-family: "Noto Sans" !important; font-weight: 600 !important; font-size: 18px !important; }

/* sponsporship */ 
.child-sponsorship { text-align: center; }
.child-sponsorship p { font-size: 11px; text-transform: uppercase; margin: 0; }
.child-sponsorship img { max-width: 300px !important; margin: 0 auto; }


.card-container {
  flex-shrink: 0;
  display: flex;
  width: 450px;
  scroll-snap-align: start;
  padding-left: 10px;
}

.card {
  display: flex;
  align-items: start;
  justify-content: start;
  width: 100%;
  flex-direction: column;
}
.slider-arrow { 
    /* display: none; */
    color: #0C6D6E !important; 
    padding: 10px;
    background-color: #FFF;
    top: 0;
    bottom: 0;
    height: 100%;
    font-size: 20px;
}
/* .slider-arrow:hover { transform: scale(1.2); } */
.slider-arrow.prev-arrow { 
    position: absolute;
    z-index: 2;
    left: 10px;
}
.slider-arrow.prev-arrow:focus, .slider-arrow.prev-arrow:active, .slider-arrow.prev-arrow:hover { 
    box-shadow: 10px 0 10px -10px rgba(0,0,0,.25);
    background-color: #FFF; 
}
.slider-arrow.next-arrow { 
    position: absolute;
    right: 10px;
    z-index: 2;
}
.slider-arrow.next-arrow:focus, .slider-arrow.next-arrow:active, .slider-arrow.next-arrow:hover { 
    box-shadow: -10px 0 10px -10px rgba(0,0,0,.25);
    background-color: #FFF; 
}
.striped-alt .slider-arrow.prev-arrow:focus, .striped-alt .slider-arrow.prev-arrow:active,  .striped-alt .slider-arrow.prev-arrow:hover,
.striped-alt .slider-arrow.next-arrow:focus, .striped-alt .slider-arrow.next-arrow:active, .striped-alt .slider-arrow.next-arrow:hover {
    background-color: #F3F6F4;
}



.striped-alt { background-color: #F3F6F4; }
.striped .card-body { border-color: #FFF; }
.striped-alt .slider-arrow { background-color: #F3F6F4; }

.bookmark-container {
    cursor: pointer;
}
.bookmark-container .bookmarked { 
    display: none;
}
.bookmark-container.active .bookmarked { 
    display: block;
}
.bookmark-container.active .bookmark { 
    display: none;
}

.favorites-counter {
    position: relative;
    display: inline-block;
    background-color: #f7cb5a;
    color: #747474;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    transition: transform 0.3s ease;
    text-decoration: none;
    margin-left: 5px;
}

.thumbs-button {
    transition: background-color 0.3s ease;
    border-radius: 500px;
    background-color: transparent;
    color: #245E97 !important;
    border: 1px solid #245E97;
    margin: 5px;
    padding: 10px 25px;
}

.thumbs-button.selected {
    background-color: #245E97; /* Highlight selected button */
    color: #fff !important;
    
}

.count-animation {
    transition: opacity 0.3s ease;
}

.feedback-modal {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 30px;
    width: 450px;
    background-color: #245E97;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    z-index: 1000;
    color:#FFF;
}
.feedback-modal textarea { height: 100px; font-size: 14px; line-height: 1.2em; margin: 10px 0; }
.feedback-modal button { 
  background-color: #FFF;
  font-size: 16px;
  font-weight: 500;
  border-style: solid;
  border-width: 0;
  border-radius: 50px 50px 50px 50px;
  padding: 10px 30px 10px 30px;
  color: #245E97 !important;
}
.feedback-modal .close {
  position: absolute;
  top: 10px;
  right: 30px;
  color:#FFF;
  font-size: 20px;
}

#favorites-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  /* justify-content: flex-start ;
  align-items: stretch;
  align-content: flex-start; */
  gap: 3% ;
  row-gap: 30px;
}

#favorites-list  .post { 
  width: 31.33%;
  background: linear-gradient(#F3F6F4 20%, #FFF);
  border: 1px solid rgba(0, 0, 0, .05);
  position: relative;
}
#favorites-list .remove-favorite { 
  position: absolute;
  overflow: hidden; 
  vertical-align: middle;
  text-align: center;
  z-index: 2;
  top: -10px;
  right: 10px;
  line-height: 100%;
  text-decoration: none;
  padding: 10px;
  font-size: 30px;  
  color: #f7cb5a;
}
#favorites-list .post .favorite-content { padding: 30px; }

#favorites-list .title { 
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 text-decoration: none; 
}
#favorites-list .excerpt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 14px;
  line-height: 1.4em;
  font-weight: 400;
}

.save-favorite { 
  text-decoration: none !important;
  color: #000;
  font-family: "Roboto", Sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.save-favorite:hover i { 
  color: #f7cb5a !important;
}
.save-favorite.active i { 
  color: #f7cb5a !important;
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tooltip {
    position: absolute;
    background: #0C6D6E;
    padding: 15px 20px;
    display: none;
    z-index: 1000;
    font-size:14px;
    line-height: 1.4em;
    width: auto;
    bottom: 30px; /* Adjust as necessary */
    left: 50%; /* Adjust as necessary */
    width: 300px;
    margin-left: -150px;
    color: #FFF !important;
    border-radius: 5px; 
    box-shadow: 0 0 20px rgba(0,0,0,.2);
}

.tooltip a { color:#FFF !important; }

.glossary-term {
    position: relative;
    text-decoration: none !important;
    border-bottom: 1px dashed #999; 
    cursor: help;
    color:#999; 
}