.HomeMainBanner,
.HomeMainBanner *,
.HomeMainBanner *:before,
.HomeMainBanner *:after {

  box-sizing: border-box;
}

.HomeMainBanner img {

  max-width: 100%;
  display: block;
}

.HomeMainBanner [tabindex="0"] {

  cursor: pointer;
}

.HomeMainBanner a {

  text-decoration: underline;
  color: inherit;
}

.HomeMainBanner a:is(:hover, :focus) {

  text-decoration: underline;
  color: inherit;
}

.homeBoxCard {

  border-radius: 10px;
  border-top: 4px solid var(--colorMain);
  background: var(--colorWhite);
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.12);
  padding: 10px;
}

.HomeMainBanner {

  padding: 30px 10px;
  background: var(--colorWhite);
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.12);
  margin-bottom: 0;
}

.HomeMainBanner.HomeMainBannerTabs {
  
  padding-bottom: 40px;
}

.HomeMainBanner .InnerContainer {

  max-width: 940px;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.hiddenText {

  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#ListSearchBox .FreeSearchTextBoxAutoComplete .AutocompleteRow:before,
#HomeSearchBox .FreeSearchTextBoxAutoComplete .AutocompleteRow:before {

  content: attr(data-text);
  padding-inline-end: 15px;
  opacity: 0;
  visibility: visible;
  height: 0;
  overflow: hidden;
}

#ListSearchBox .flagCountries__dropdown:not(:empty),
#ListSearchBox .FreeSearchTextBoxAutoComplete:not(:empty), 
#HomeSearchBox .flagCountries__dropdown:not(:empty),
#HomeSearchBox .FreeSearchTextBoxAutoComplete:not(:empty) {

  position: absolute;
  display: none;
  width: auto;
  right: -1px;
  left: -1px;
  top: -1px;
  bottom: auto;
  margin: 0;
  margin-top: 0;
  transform: none;
  padding: 0;
  padding-top: 45px;
  z-index: 0;
  border-radius: 22.5px;
  border: 1px solid var(--colorBorder);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  background: var(--colorWhite);
  overflow: hidden;
}

#ListSearchBox .AutoCompleteResultText, 
#HomeSearchBox .AutoCompleteResultText {
  
  flex-grow: 1;
}

#lResults.FreeSearchTextBoxAutoComplete:not(:empty) .AutoCompleteResultText,
#lMobileResults.FreeSearchTextBoxAutoComplete:not(:empty) .AutoCompleteResultText {
  
  padding-inline-start:  63px;
}

#lResults.FreeSearchTextBoxAutoComplete:not(:empty) .AutoCompleteHistory,
#lMobileResults.FreeSearchTextBoxAutoComplete:not(:empty) .AutoCompleteHistory {
  
  inset-inline-start: 90px;
}

body.ltr #lResults.FreeSearchTextBoxAutoComplete:not(:empty) .AutoCompleteHistory,
body.ltr #lMobileResults.FreeSearchTextBoxAutoComplete:not(:empty) .AutoCompleteHistory {
  
  inset-inline-start: 105px;
}



#ListSearchBox form .input:focus-within .FreeSearchTextBoxAutoComplete:not(:empty),
#HomeSearchBox form .input:focus-within .FreeSearchTextBoxAutoComplete:not(:empty) {

  display: block;
}

#ListSearchBox .flagCountries__dropdown:not(:empty) .hiddenText,
#ListSearchBox .FreeSearchTextBoxAutoComplete:not(:empty) .hiddenText,
#HomeSearchBox .flagCountries__dropdown:not(:empty) .hiddenText,
#HomeSearchBox .FreeSearchTextBoxAutoComplete:not(:empty) .hiddenText {

  padding-inline-start: 10px;
}

#ListSearchBox .AutocompleteRow,
#HomeSearchBox .AutocompleteRow {

  padding: 6px;
  padding-inline-start: 20px;
  padding-inline-end: 52px;
  cursor: pointer;
  height: 40px;
  position: relative;
  background: var(--colorWhite);
  display: flex;
  align-items: center;
  font-size: 14px;
}

#ListSearchBox .AutocompleteRow:nth-child(1),
#ListSearchBox .flagCountries__dropdown__item:nth-child(1),
#HomeSearchBox .AutocompleteRow:nth-child(1),
#HomeSearchBox .flagCountries__dropdown__item:nth-child(1){

  border-top: 1px solid var(--colorBorder);
}

#ListSearchBox .AutocompleteRow:is(:hover),
#HomeSearchBox .AutocompleteRow:is(:hover) {

  background: #eee;
}

#ListSearchBox .AutocompleteRow .AutoCompleteAddText:is(:hover) ,
#HomeSearchBox .AutocompleteRow .AutoCompleteAddText:is(:hover) {

  background: rgba(0,0,0,.05);
}


#lMobileResults .AutoCompleteHistory.default,
#qMobileResults .AutoCompleteHistory.default,
#ListSearchBox .AutoCompleteHistory, 
#HomeSearchBox .AutoCompleteHistory {

  width: 28px;
  height: 28px;
  position: absolute;
  top: 50%;
  inset-inline-start: 15px;
  transform: translateY(-50%);
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ListSearchBox .AutoCompleteHistory:before,
#HomeSearchBox .AutoCompleteHistory:before {

  font-style: normal;
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  content: '\f002';
}

#ListSearchBox .AutoCompleteHistory.default.user:before,
#HomeSearchBox .AutoCompleteHistory.default.user:before {

  content: '\f1da';
}

#ListSearchBox .AutoCompleteResultCategory, 
#HomeSearchBox .AutoCompleteResultCategory {
  
  opacity: .5;
  font-size: 10px;
  padding-inline: 10px;
}

#ListSearchBox .AutoCompleteAddText, 
#HomeSearchBox .AutoCompleteAddText {
  
  font-style: normal;
  width: 48px;
  height: 40px;
  position: absolute;
  color: #808080;
  font-size: 12px;
  inset-inline-end: 0;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ListSearchBox .AutoCompleteAddText:before,
#HomeSearchBox .AutoCompleteAddText:before {

  font-style: normal;
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  content: '\e09f';
}


.ltr #ListSearchBox .AutoCompleteAddText:before,
.ltr #HomeSearchBox .AutoCompleteAddText:before {
  
  content: '\e09d';
}


#ListSearchBox .InappropriateLink,
#HomeSearchBox .InappropriateLink {

  display: none;
}

#ListSearchBox .AutocompleteRow .AutoCompleteJump,
#HomeSearchBox .AutocompleteRow .AutoCompleteJump{

  display: flex;
  justify-content: end;
  align-items: center;
}


#ListSearchBox .input .faIcon,
#HomeSearchBox .input .faIcon {

  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  inset-inline-end: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  justify-items: center;
  align-items: center;
}

#ListSearchBox .input .faIcon i,
#HomeSearchBox .input .faIcon i {

  display: block;
  transform-origin: center;
  margin: auto;
}
 
#ListSearchBox .input .faIcon.xmark,
#HomeSearchBox .input .faIcon.xmark { 
  
  display: none;
}

#ListSearchBox .input:has(input:not(:placeholder-shown)) .faIcon.xmark,
#HomeSearchBox .input:has(input:not(:placeholder-shown)) .faIcon.xmark {
  
  display: flex;
}

#ListSearchBox .input .faIcon.loader,
#HomeSearchBox .input .faIcon.loader {
  
  display: none;  
  background: var(--colorWhite);
  z-index: 4;
}

#ListSearchBox .input.inputLoader .faIcon.loader,
#HomeSearchBox .input.inputLoader .faIcon.loader {
  
  display: flex;  
}


#HomeSearchBox {

  min-width: 400px;
  width: 33%;
  background: url(../../../images/searchBackground.png) no-repeat;
  background-size: 100% 100px;
}

.ltr #HomeSearchBox {

  background: url(../../../images/searchBackground-flip.png) no-repeat;
}

#HomeUserData {

  min-width: 270px;
  border-color: #50676A;
}

#HomeUserAlert {

  min-width: 195px;
  width: 195px;
  border: 0;
}

#mobileHomeUserAlert {
  
  box-shadow: none;
  border-radius: 10px;
  border: 1px solid color-mix(in lab, var(--colorBorder), white 50%)
}

#HomeSearchBox form {

  display: flex;
  flex-flow: column wrap;
  row-gap: 20px;
}

#HomeSearchBox form h2 {

  margin: 0;
  margin-bottom: -10px;
}

#ListSearchBox form .input,
#HomeSearchBox form .input {

  position: relative;
  outline: 0;
  background: var(--colorWhite);
  border-radius: 0;
  border: 1px solid var(--colorBorder);
  border-radius: 100vh;
  padding: 5px 10px;
  padding-inline-start: 20px;
  height: 45px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  z-index: 1;
}

#ListSearchBox form .input label,
#HomeSearchBox form .input label {
  
  font-weight: bold;
  white-space: nowrap;
}

#ListSearchBox form > div:nth-child(2) .input,
#HomeSearchBox form > div:nth-child(2) .input {

  z-index: 3;
}

#ListSearchBox form input:not(.wtf),
#HomeSearchBox form input:not(.wtf) {

  outline: 0;
  border-radius: 0;
  border: 0;
  border-radius: 0;
  padding: 5px;
  width: 100%;
  font-size: inherit;
}

#ListSearchBox form input#l:not(.wtf),
#HomeSearchBox form input#l:not(.wtf) {

  order: 1;
}

#ListSearchBox .flagCountriesWrap,
#HomeSearchBox .flagCountriesWrap {

  width: 75px;
  z-index: 1;
}

#ListSearchBox .flagCountries,
#HomeSearchBox .flagCountries {

  display: flex;
  position: relative;
  z-index: 1;
  inset-inline-start: 0;
  height: 100%;
  cursor: pointer;
}

#ListSearchBox form .input:is(:hover, :focus-within),
#HomeSearchBox form .input:is(:hover, :focus-within) {

  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

#ListSearchBox form .input label,
#ListSearchBox form .input input:not(.wtf),
#ListSearchBox form .input.active label,
#ListSearchBox form .input.active input:not(.wtf),
#HomeSearchBox form .input label,
#HomeSearchBox form .input input:not(.wtf),
#HomeSearchBox form .input.active label,
#HomeSearchBox form .input.active input:not(.wtf)
 {

  position: relative;
  z-index: 2;
}

#ListSearchBox form .input .faIcon.xmark,
#ListSearchBox form .input.active .faIcon.xmark,
#HomeSearchBox form .input .faIcon.xmark,
#HomeSearchBox form .input.active .faIcon.xmark {
  
  z-index: 3;
}

#ListSearchBox form button,
#HomeSearchBox form button {

  height: 40px;
  border-radius: 100vh;
  min-width: 165px;
  font-size: 18px;
  font-weight: normal;
  margin: auto;
  transition: 250ms;
  z-index: 0;
}

#ListSearchBox .rolesSelectionBtn,
#HomeSearchBox .rolesSelectionBtn {

  text-align: end;
  margin: -10px 0;
}

#modal_window #HomeSearchBox .rolesSelectionBtn {
  
  display: none;
}

#ListSearchBox .rolesSelectionBtn a,
#HomeSearchBox .rolesSelectionBtn a {

  display: inline-block;
  color: #0070ff;
  text-decoration: none;
}

#ListSearchBox .rolesSelectionBtn a:is(:hover, :focus),
#HomeSearchBox .rolesSelectionBtn a:is(:hover, :focus) {

  text-decoration: underline;
}

#ListSearchBox .HomeSearchBoxBtn,
#HomeSearchBox .HomeSearchBoxBtn {

  text-align: center;
}

#ListSearchBox .flagCountries__dropdown__item,
#HomeSearchBox .flagCountries__dropdown__item {

  padding-inline-start: 20px;
  border-radius: 0;
}

#HomeUserData {

  container: HomeUserData / inline-size;
  overflow: hidden;
}

#HomeUserData > div {

  background: linear-gradient(180deg, #A0B4B7 50px, var(--colorWhite) 50px);
  margin: -10px;
  min-height: 353px;
}

#HomeUserData .HomeUserDataWrap {

  display: flex;
  flex-flow: column wrap;
  justify-items: center;
  padding: 10px;
  height: 100%;
}

#HomeUserData .HomeUserDataWrap .HomeUserDataWrapDetails{ 
  
  width: 100%;
}
#HomeUserData .HomeUserDataWrap .content .contentWrap.link {
  cursor: pointer;
}

#HomeUserData .HomeUserImageWrap {

  position: relative;
  width: 90px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: auto;
  background: var(--colorWhite);
  outline: 1px solid #A0B4B7;
  outline-offset: -1px;
  transition: 250ms;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
}

#HomeUserData .progress-bar__background,
#HomeUserData .progress-bar__progress {
  
  stroke-width: 1;
}

#HomeUserData .HomeUserImageWrap > img  {
  
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#HomeUserData .HomeUserImageWrap > i {

  font-size: 55px;
}

#HomeUserData .HomeUserImageWrap:is(:hover) {

  transform: scale(1.1);
}

#HomeUserData .HomeUserImageWrap > .svgWrap  {
  
  position: absolute;
  top: -2px;
  inset-inline-start: -2px;
  width: calc(100% + 4px);
  z-index: 0;
}

#HomeUserData .HomeUserDetails {

  width: calc(100% + 20px);
  text-align: center;
  margin: 0 -10px;
  padding: 10px;
  border-bottom: 1px solid #A0B4B7;
}

#HomeUserData .HomeUserDetails > strong,
#HomeUserData .HomeUserDetails > span {

  text-align: center;
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#HomeUserData .HomeUserDetails .title {

  font-size: 18px;
  font-weight: bold;
}

#HomeUserData .HomeUserDetails .desc {

  color: var(--colorLightText);
}

#HomeUserData .HomeStatisticsDetails {

  width: calc(100% + 20px);
  text-align: center;
  margin: 0 -10px;
  border-bottom: 1px solid #A0B4B7;
}

#HomeUserData .HomeStatisticsDetails > div {

  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  padding: 10px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--colorLightText);
  position:relative;
}

#HomeUserData .HomeStatisticsDetails > div:hover:after {
  
  content: '';
  background: #eee;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#HomeUserData .HomeStatisticsDetails > div > div {

  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

#HomeUserData .HomeStatisticsDetails > div .number {

  text-align: end;
  min-width: 40px;
  color: var(--colorBlue);
  flex-grow: 0;
}

#HomeUserData .HomeStatisticsContent:not(:empty) {

  width: 100%;
  padding: 10px 0;
  margin: auto;
}

#HomeUserData .HomeStatisticsContent:not(:empty) > .content  {

  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}

#HomeUserData .HomeStatisticsContent:not(:empty) > .content a{

  text-decoration: none;
}

#HomeUserData .HomeStatisticsContent:not(:empty) > .content.withImage > a {
  
  display: flex;
  align-items: center;
  gap: 10px;
}

#HomeUserData .HomeStatisticsContent:not(:empty) > .content.withImage  .contentWrap {
  
  flex: 1;
}


#HomeUserData .HomeStatisticsContent:not(:empty) > .content img {
  
  display: block;
  width: 40px;
}

#HomeSearchBox .HomePopularSearches {

  width: 100%;
  font-size: 14px;
  font-weight: inherit;
}

#HomeSearchBox .HomePopularSearchesContent {

  display: flex;
  flex-flow: row wrap;
  padding: 10px;
  margin: 0 -10px;
  gap: 5px;
  font-weight: normal;
}

#HomeSearchBox .HomePopularSearchesContent a {

  font-size: 12px;
  text-decoration: none;
  color: var(--color15);
  padding: 6px 10px;
  border-radius: 100vh;
  border: 1px solid #D0D0D0;
  transition: 250ms;
  background: var(--colorWhite);
  
  
  &:first-child {
  
    border-width: 2px;
  }
}

#HomeSearchBox .HomePopularSearchesContent a:is(:hover, :focus) {

  color: var(--colorText);
  border: 1px solid var(--colorText);
  background: var(--colorLigthBlue);
  border-color : color-mix(in lab, var(--colorBorder), white 20%);
  
  &:first-child {
  
    border-width: 2px;
  }
}

#mobileHomeUserAlertWrapper {
  
  display: none;  
}

#HomeUserAlert {

  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  overflow: clip;
}

#HomeUserAlert:empty {

  display: none;
}

.HomeUserAlertWrap {

  width: 100%;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
}

.HomeUserAlertWrap > img {

  width: 90px;
}


.HomeUserAlertWrap .iconRound  {
   
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  color: #000;
  font-size: 20px;
}

.HomeUserAlertWrap .iconRound.bell {
  
  background: #dbeafe;
  color: #4f82ef;
}    

.HomeUserAlertWrap .HomeUserAlertLink {
  
  margin: -10px;
  display: block;
}

.HomeUserAlertWrap .HomeUserAlertTitle {

  font-size: 18px;
  font-weight: bold;
  letter-spacing: -0.5px;
  max-width: 185px;
  text-align: center;
}

.HomeUserAlertWrap .HomeUserAlertDesc {

  text-align: center;
  line-height: 1.4;
}

.HomeUserAlertWrap__space-between {
  
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  gap: 10px;
  
  & .HomeUserAlertHeader {
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    color: var(--colorLightText);
    
    & > div {
    
      position: relative;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    & .bell-icon {
  
      font-size: 20px;
      color: #4f82ef;
    }
    
    & .bell__alert {
      
      position: absolute;
      top: 0;
      inset-inline-start: -5px;
      background: #ef4444;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      color: white;
    }

    & .bell__currentJob {
      
      background: #4acf7b;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: block;
        
    }
  }
  
  & .HomeUserAlertBody {
   
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    
    & .newJobsCounter {
    
      padding: 5px 10px;
      color: white;
      background: #4f82ef;
      font-size: 14px;
      font-weight: bold;
      border-radius: 5px;  
    }
    
    
    & .HomeUserAlertTitle {
    
      font-weight: normal;
      font-size: 27px;
      
      & .textBlue {
        
        color: #4f82ef;
      }
    }
    
    & .HomeUserAlertDesc {
    
      font-size: 14px;  
      color: var(--colorLightText);
    }
  }
  
  
  & .HomeUserAlertFooter {
  
    text-align: center;
    color: var(--colorLightText);
    font-size: 12px;
  }
}

#HomeUserAlert .HomeUserAlertButton .button {

  text-decoration: none;
  color: var(--colorWhite);
  min-height: 40px;
  height: auto;
  border-radius: 100vh;
  min-width: 165px;
  font-size: 18px;
  font-weight: normal;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: -0.5px;
  transition: 250ms;
  line-height: 1.2;
}

.byBoardNew .InnerContainer , 
.byBoardNew .InnerContainer *, 
.byBoardNew .InnerContainer *:before, 
.byBoardNew .InnerContainer *:after {
  
  box-sizing: border-box;
}

.byBoardNew  {
  
  z-index: 1;
  position: relative;
}

.HomeMainBanner.HomeMainBannerTabs + .byBoardNew  {
  
  margin-top: -42px;
}

.byBoardNew .InnerContainer{
  
  max-width: 940px;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  background: none;
  text-align: initial;
}

.byBoardNew .triggerView {
  
  display: flex;
  flex-wrap: nowrap;
  place-content: flex-start;
  color: initial;
  font-size: 16px;
  background: none;
  max-width: none;
  overflow: auto;
}

.byBoardNew .triggerViewDiv { 
  
  cursor: pointer;
  border-bottom: 4px solid transparent;
  width: auto;
  text-align: center;
  padding: 10px 20px;
  color: initial;
  white-space: nowrap;
}

.byBoardNew .triggerViewDiv > * { 
  
  opacity: .7;
}

.byBoardNew .triggerViewDiv.selected > *,
.byBoardNew .triggerViewDiv:is(:hover, :focus) > * { 
  
  opacity: 1;
}

.byBoardNew .triggerViewDiv .counter {
  
  color: var(--colorLightText);
}


.byBoardNew .triggerViewDiv.selected {

  border-bottom: 4px solid var(--colorMain);
}

/* --------------------  Skeleton ------------------ */

#HomeUserData.skeletonWrapper {

  border: 0;
}

#HomeUserData.skeletonWrapper > div {

  background: none;
}

#HomeUserData.skeletonWrapper .HomeUserImageWrap {

  background: #eee;
  border: 0;
  box-shadow: none;
  outline: 0;
}

#HomeUserData.skeletonWrapper .HomeUserDetails {

  border-color: #eee;
}

#HomeUserData.skeletonWrapper .HomeStatisticsDetails {

  border-color: #eee;
}

#ListSearchBox form .FreeSearchTextBoxPlaceHolder, 
#HomeSearchBox form .FreeSearchTextBoxPlaceHolder {
  
  all: unset;
}

#ListSearchBox form .FreeSearchTextBoxAutoComplete:has(.noResultsError) , 
#HomeSearchBox form .FreeSearchTextBoxAutoComplete:has(.noResultsError) {
  
  border-color: var(--colorMain);
}

#ListSearchBox form .FreeSearchTextBoxAutoComplete .noResultsError, 
#HomeSearchBox form .FreeSearchTextBoxAutoComplete .noResultsError{
  
  border-color: var(--colorMain);
  color: var(--colorMain);
  justify-content: center;
}

#HomeUserData .HomeStatisticsContent:not(:empty) > .content:has(.employmentStatusUpdateDate, .contactDetailsStatusUpdateDate) a {
  
  display: none;
}

.employmentStatusUpdateDate +.contactDetailsStatusUpdateDate {
  
  display: none;
}

.employmentStatusUpdateDate,
.contactDetailsStatusUpdateDate {
 
  display: flex;
  flex-flow: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  
  & strong {
    
    text-align: center;
  }
  
  & :is(.employmentStatusUpdateDateContent , .contactDetailsStatusUpdateDateContent) {
  
    display: flex;
    gap: 10px;

    & button {
      
      height: 40px;
      border-radius: 30px;
      min-width: 100px;
      border: 1px solid var(--color4);
      font-weight: normal;
      color: var(--color4);
      background: var(--colorWhite);
      
      &:is(:hover) {
        
        background: color-mix(in lab, black 5%, var(--colorWhite));
      }
    }
  }
}

/* ------------------ End Skeleton ----------------- */

@media screen and (max-width: 940px) {

  .HomeMainBanner .InnerContainer > div {

    flex-grow: 1;
  }
}

@media screen and (max-width: 700px) {

  #modal_window #modal_content {
    
    height: calc(100dvh - 60px);
  }

  .HomeMainBanner {

    padding: 10px;
    box-shadow: none;
    margin-bottom: 0;
  }

  #HomeSearchBox {

    min-width: auto;
    width: 100%;
  }

  #HomeSearchBox .HomePopularSearchesContent {

    flex-flow: row nowrap;
    font-weight: normal;
    white-space: nowrap;
    overflow: auto;
  }

  #HomeSearchBox .HomePopularSearchesContent::-webkit-scrollbar {

    display: none;
  }

  #HomeUserAlert {

    display: none;
  }
  
  #mobileHomeUserAlertWrapper {
    
    display: block;
  }
  
  .byBoardNew {
   
    margin-top: 0;  
  }

}

@container HomeUserData (min-width: 300px) {



  #HomeUserData > div {

    background: var(--colorWhite);
    min-height: 170px;
  }

  #HomeUserData .HomeUserDataWrap {

    display: flex;
    flex-flow: row wrap;
    justify-items: center;
    padding: 10px;
  }

  #HomeUserData .HomeUserDataWrap .HomeUserDataWrapDetails > div[role="button"] {

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
    overflow-x: clip;
    flex: 1;
    /*overflow: hidden;*/
  }

  #HomeUserData .HomeUserDataWrapDetails {

    display: flex;
    width: 100%;
    gap: 10px;
  }

  #HomeUserData .HomeUserImageWrap {

    min-width: 55px;
    width: 55px;
    height: 55px;
  }

  #HomeUserData .HomeUserImageWrap > i {

    font-size: 30px;
  }

  #HomeUserData .HomeUserDetails {

    border: 0;
    margin: 0;
    padding: 0;
    text-align: start;
    width: 100%;
    overflow: hidden;
  }

  #HomeUserData .HomeUserDetails > strong,
  #HomeUserData .HomeUserDetails > span {

    text-align: start;
  }

  #HomeUserData .HomeUserImageWrap {

    margin: 0;
  }

  #HomeUserData .HomeStatisticsDetails {

    border: 0;
    margin: 0;
    padding: 0;
    text-align: start;
    max-width: none;
    width: auto;
    flex: 1;
    overflow: hidden;
  }

  #HomeUserData .HomeStatisticsDetails > div {

    padding: 0;
    margin: 5px 0;
  }

  #HomeUserData .HomeStatisticsDetails > div:hover:after {
  
    content: none;
    
  }

}

#lastSearchesTab {
  box-sizing: border-box;
  font-size: 14px;
}

#lastSearchesTab *, 
#lastSearchesTab *:before, 
#lastSearchesTab *:after {
  box-sizing: border-box;
}

#lastSearchesTab ul, 
#lastSearchesTab li {
  padding: 0;
  margin: 0;
  list-style: none;
}

#lastSearchesTab .InnerContainer {
  max-width: 960px;
  margin: auto;
  margin-block: 30px;
  padding-inline: 10px;
}

#lastSearchesTab .InnerContainer > .tabsList {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

#lastSearchesTab .InnerContainer > .tabsList .tab {
  flex-grow: 1;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby {
  position: relative;
  padding-block: 10px 37px;
  border-radius: 10px;
  border: 1px solid color-mix(in lab, var(--colorBorder), white 50%);
  background: var(--colorWhite);
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.12);
  max-height: 265px;
  min-height: 265px;
  overflow: hidden;
  transition: 250ms;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby .close {
  display: none;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby.open {
  max-height: 2000px;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby.open .seeMoreToggle:after {
  transform: rotate(180deg);
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby.open .close {
  display: inline;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby.open .seeMore {
  display: none;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby li {
 
  position: relative; 
  display: flex;
  align-items: center;
  height: 36px;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby li a {
  
  display: block;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby li a:after {
  
  content: '';
  position: absolute;
  inset: 0;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby li:is(:hover, :focus) {
  background: rgba(0, 0, 0, .05);
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby li .counter {
  
  font-size: 12px;
  color: #555;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tabTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  pointer-events: none;
  margin-bottom: 10px;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tabTitle .sortList {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  pointer-events: all;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .05);
  transition: 250ms;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tabTitle .sortList.ABC {
  transform: rotate(180deg);
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tabTitle .sortList:is(:hover) {
  background: rgba(0, 0, 0, .05);
}

#lastSearchesTab .InnerContainer > .tabsList .tab .tabTitle > * {
  font-size: inherit;
  padding: 0;
  margin: 0;
  font-weight: bold;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .seeMoreToggle {
  cursor: pointer;
  text-transform: lowercase;
  position: absolute;
  background: aliceblue;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 10px;
  background: color-mix(in lab, black, white 95%);
  border-top: 1px solid color-mix(in lab, var(--colorBorder), white 50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#lastSearchesTab .InnerContainer > .tabsList .tab .seeMoreToggle:is(:hover, :focus) {
  background: color-mix(in lab, black, white 90%);
}

#lastSearchesTab .InnerContainer > .tabsList .tab .seeMoreToggle:after {
  content: '\f078';
  font-size: 10px;
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 10px;
  transform-origin: center 3px;
}

#seoContentWrapper {

  background: var(--colorWhite);
  display: flex;
  width: 100%;
  margin-bottom: -40px;
}

#seoContentWrapper .seoTitleContentWrap {
  
  display: flex;
  justify-content: center;
  width: 100%;
}

#seoContentWrapper .seoTitleContentWrap h2 {
  
  font-size: 18px;
  margin: 0;
  text-align: center;
}

#seoContentWrapper ul {
  
  margin: 0;
  padding: 20px;
  padding-inline-start: 30px;
  list-style: disc;
  display: flex;
  flex-flow: row wrap;
  gap: 20px 30px;
}

#seoContentWrapper ul > li {

  list-style: disc;
  width: calc(50% - 15px);
}

#seoContentWrapper ul h2 {
  
  margin: 0;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
  
}

#seoContentWrapper .seoSubTitleContentWrap {
 
  display: flex;
  justify-content: center;
  width: 100%;
}

#seoContentWrapper .seoSubTitleContentWrap h2 {
 
  font-size: 18px;
  margin: 0;
  text-align: center;
}

#seoContentWrapper .seoButtonContentWrap {
  
  display: flex;
  justify-content: center;
  width: 100%; 
  margin-top: 10px;
}

#seoContentWrapper .seoButtonContentWrap .bttn {
  
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 20px;
  border-radius: 100px;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  min-height: 40px;
  min-width: 125px;
}


@media screen and (min-width: 768px) {
  
  #lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby:is(:hover, :focus) {
    background: var(--colorLigthBlue);
    border-color: color-mix(in lab, var(--colorBorder), white 20%);
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
  }
  
}

@media screen and (max-width: 767px) {
 
  #lastSearchesTab {
    
    & .InnerContainer {
      
      margin-block: 10px;
      padding-inline:  10px;
      overflow: hidden;
      
      
      & > .tabsList {
        
        gap: 0;
        
        & .tab {
          
          width: 100%;

          & .tabTitle {
            
            pointer-events: all;
            cursor: pointer;
            position: relative;
            background: var(--colorWhite);
            margin: 0;
            padding: 15px 10px;
            
            &:after {
            
              content: '\f078';
              font-size: 10px;
              font-family: "Font Awesome 6 Pro";
              font-weight: 300;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              inset-inline-end: 10px;
              transform-origin: center 3px;  
            }
            
            & .sortList {
              
              display: none;
            }
            
            > * {
              
              margin: 0;
            }
          }
          
          &:has( .tabTitle + .open) .tabTitle:after {
              
            transform: rotate(180deg);
          }
          
          
          & .tagBoby {
            
            min-height: auto;
            max-height: none;
            box-shadow: none;
            border: 0;
            border-radius: 0;
            padding: 0;
            margin-bottom: 10px;
         

            &.open {
              
              min-height: 0;
              max-height: 0;
              margin-bottom: 0;
              padding-bottom: 0;
            }
          }
          
          &:last-child {
            
            & .tagBoby { 
            
              margin-bottom: 0;
            }
          }
        }
        
       
        
        & .seeMoreToggle {
          
          display: none;
        }
        
        
         & .tab {
          
          & ul {
          
            display: flex;
            flex-wrap: wrap;
    
            & li {
              
              flex-basis: 50%;
              max-width: 50%;
            }
          }
        }
      }
    }
  } 
  
  
  #lastSearchesTab .InnerContainer > .tabsList .tab .tagBoby li .counter {
  
    display: none;
  }

  
  .HomeMainBanner.HomeMainBannerTabs {
    
    padding-bottom: 20px;  
  }
  
  #seoContentWrapper {
    
    margin-inline: 10px;
    margin-bottom: -30px;
    width: calc(100% - 20px);
  }
  
  #seoContentWrapper ul > li {

    list-style: disc;
    width: 100%;
  }
  
  #seoContentWrapper .seoTitleContentWrap + div {
    
    width: 100%;
  }
}