@media (max-width: 1280px) {
  
  .custom-dropdown-selected-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }
  
}

@media (max-width: 768px) {

  .slider-label-container {
	flex-direction: column;
  }

  .sessions-container {
	padding-top: var(--screen-padding-mobile);
	padding-bottom: var(--screen-padding-mobile);
    padding-left: var(--screen-padding-mobile);
	padding-right: var(--screen-padding-mobile);    
  }

  .session-card,
  .session-card:hover,
  .session-card.active,
  .session-card.active:hover {
	padding: var(--session-card-padding) var(--session-card-padding-mobile);
  }

  .session-card-name,
  .session-card-location-name {
    flex: 1 1 100%; /* Make them take full width within h3 */
  }

  .session-card-location-name .location-text {
	text-overflow: ellipsis;
	overflow: hidden;
	max-width:160px;
	white-space: nowrap;
	display: inline-block; /* Has to be inline-block not inline-flex for ellipsis to work */
  }

  .session-card-location-name .resource-text {
	text-overflow: ellipsis;
	overflow: hidden;
	max-width:160px;
	white-space: nowrap;
	display: inline-block; 
  }
  
  .session-details.time-text-group {
	flex-direction: column;
	flex-wrap: wrap;
  }
  
  .mobile-number-input-field-group {
	display: flex;
	flex-wrap: wrap;
  }
  
  .country-code-dropdown {
	width: 100%;
	max-width: unset;
  }
  
}

@media (max-width: 380px) {

  .custom-dropdown-selected-text {
	max-width: var(--dropdown-text-min-width);
  }
  
  .session-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    width: 100%;
  } 
  
  .session-card-header-text {
    flex: 1 1 auto;
    width: 100%;
    align-items: flex-start;
  }

  .session-card-header-text h3 {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  
  .session-details,
  .session-instructors,
  .instructor-pill,
  .session-card-header-text h3  {
	font-size: var(--font-size-label-sm) !important;	
  }

}