@font-face {
  font-family: 'NNSwinton-Medium';
  src: url('/fonts/NNSwinton-Medium.otf') format('opentype');
}

/*
@media screen and (max-width: 700px) {
  .tags-container {
    padding: 0px 90px 0px 90px;
    max-width: 100%!important;
    width: 100%!important;
  }
}
*/



.main-title {
  font-size: 38px;
  font-weight: 600;
  padding-top: 21px;
  padding-bottom: 20px;
  line-height: 38px;
  text-align: center;
}

.main-tagline {
  font-size: 22px;
  line-height: 26px;
  text-align: center;

}

#navbar-dropdown {
  position: absolute;
  display: none;
  top: 50px;
  right: 0px;
  background: white;
  width: 138px;
  border-radius: 10px;
  border: 1px solid #eeeeee;
  box-shadow: 2px 2px 10px #cccccc;
  font-weight: normal;

}

#navbar-dropdown .navbar-dropdown-item {
  padding: 10px 14px;
  border-bottom: 1px solid #dddddd;
  color: #333333;
  display: block;
}

#navbar-dropdown .navbar-dropdown-item:last-child {
  border-bottom: 0;
}

#navbar-dropdown .navbar-dropdown-item:hover {
  background-color: #FAF8FF;
}

.navbar-item:focus {
  color: #4a4a4a!important;
  background: transparent!important;
}

.tabs ul {
  border: 0px;
}

.tabs li a {
  border: 0px;
}
.tabs {
  overflow: visible;
  font-family: Lato;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.tabs a {
  color: #ABABAB!important;
  padding: 1px;
  margin: 0px 10px 0px 10px;
}

.navbar-item .is-active {
  border-bottom: 2px solid #00857F;
  padding-bottom: 0;
  line-height: 20px;
  margin-bottom: -2px;
}

.navbar-item:hover {
  background-color: transparent!important;
  color: #333333!important;
}

.navbar-item:hover a {
}

.tabs li.is-active a {
  color: #6A6A6A!important;
  border-bottom: 2px solid #00857F;
  font-weight: 700;
  margin-bottom: -2px;

}

#userinfo {
  position: relative;
  cursor: pointer;
}

.userinfo .fa-user {
  display: block;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  background-color: #eeeeee;
  line-height: 24px;
  float: left;
  text-align: center;
}

.logoutlink {
  color: #111111!important;
}

.project-category {
  position: absolute;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  top: 10px;
  left: 10px;
  padding: 4px 8px 4px 8px;
  border-radius: 4px;
  gap: 4px;
  background-color: white;
  color: #525252;
  z-index: 2;
  margin-right: 95px;
}



.project-funcs {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex; /* Changed from none to flex to use opacity for transitions */
  opacity: 0; /* Make .project-funcs invisible by default */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}



.project {
  cursor: pointer;
}

.card.project {
  position: relative;
  overflow: hidden;
}

.project-glass {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
}

.card.project:hover .project-glass {
  opacity: 1;
}

.card-image.project-card-image,
.card-content.project-card-content {
  z-index: 1;
}



.card-image.project-card-image,
.card-content.project-card-content {
  z-index: 1;
}

.project-category,
.project-funcs,
.projects-user-info,
.projects-user-follow {
  z-index: 3; /* Ensuring these elements appear above the blur effect */
}




.project:hover .project-funcs {
  opacity: 1; /* Make .project-funcs fully visible when .project is hovered */
}

.project:hover .projects-user-follow {
  opacity: 1; /* Make .project-funcs fully visible when .project is hovered */
}

.project:hover .project-title {
  opacity: 1; /* Make .project-funcs fully visible when .project is hovered */
}

.my-interests {
  text-align: center;
  //styleName: Label-medium;
  /*font-family: Poppins;*/
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  margin-top: 18px;

}

.my-interests-edit {
  margin-left: 10px;
  font-weight: 500;
  cursor: pointer;
}

.project-like {
  float: left;
  width: 32px;
  height: 32px;
  background-color: white;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-like img {
  width: 12px;
  height: 10.5px;
  display: block;
}

.project-bookmark {
  float: left;
  width: 32px;
  height: 32px;
  background-color: white;
  border-radius: 16px;
  text-align: center;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-bookmark img {
  width: 10px;
  height: 12px;
  display: block;
  margin: auto;
}

.project-funcs .project-edit {
  float: left;
  width: 32px;
  height: 32px;
  background-color: white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-funcs .project-delete {
  float: left;
  width: 32px;
  height: 32px;
  background-color: white;
  border-radius: 4px;
  text-align: center;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-funcs .project-delete i {
  margin-bottom: 1px;
}

.project-image-input {
  background: transparent!important;
  border: 0!important;
  color: white!important;
}

.project-image-input-figure {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23C6C6C6FF' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 4px;
  overflow: hidden;
}

#preview-image {
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.navbar-item:not(#logo) {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
}

.navbar-start {
    margin-left: 20px;
}

.navbar-end {
    margin-left: 20px;
}

.logoutlink-mob {
  color: #00857F!important;
}

.navbar-burger span {
  height: 2px;
  width: 20px;
  left: calc(50% - 10px);
}

/*
.level-left-search {
  width: 100%;
  max-width: 501px;
}


.level-item-search {
  width: calc(100% - 80px);
}

.level-item-search .field {
  width: 100%;
}


.level-item-search .control {
  width: 100%;
}

.level-item-search .search-container {
  width: 100%;
}
*/





@media screen and (min-width: 1024px) {
  .navbar-start {
      margin-left: 56px;
  }

  .navbar-end {
      margin-left: 0px;
  }


}



.navbar-profile-image {
  width: 24px;
  height: 24px;
  float: left;
  overflow:hidden;
}

.navbar-item img {
  width: 100%;
}

.navi-spacer {
  width: 24px;
  height: 24px;
  float: left;
}


#logo {
    font-size: 28px;
    font-family: 'NNSwinton-Medium', sans-serif;
    color: #111111;
}

.Button-regular {
  background-color: #00857F;
  color: white;
  //styleName: Button-regular;
  font-family: Lato;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
}

.Button-regular:hover {
  color: white;
  background: var(--interactive-bg-emphasis-variant, #509D97);
}

.Button-secondary {
  background-color: #ffffff;
  color: #111111;
  //styleName: Button-secondary;
  font-family: Lato;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;

  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 46.5%, #F3F3F3 100%);
  border: 1px solid #cccccc;


}

body, html {
  margin: 0px;
  padding: 0px;
}

body, textarea {
  //styleName: Body-medium;
font-family: Lato;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;

}

textarea {
  font-size: 14px!important;
  resize: none!important;
}

.tag {

    padding: 4px, 12px, 4px, 12px!important;
    border-radius: 4px!important;
    border: 1px solid #C6C6C6!important;
    background: white!important;
    //styleName: Label-medium;
    font-family: Lato!important;
    font-size: 14px!important;
    font-weight: 500!important;
    line-height: 20px!important;
    letter-spacing: 0em!important;
    color: #6A6A6A!important;
    cursor: pointer;
}

.project-edit-title {
  //styleName: Label-large;
  font-family: Lato;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
}

.project-edit-subtitle {
  //styleName: Body-medium;
  font-family: Lato;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;

}

.label {
  //styleName: Label-medium;
font-family: Lato;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: left;

}

.tag-edit {
  margin: 0px 4px 6px 0px;
  color: #525252!important;
  background: #F3EFFA!important;
  border: 0px!important;
}

.input, .select {
  //styleName: Label-medium;
  font-family: Lato;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  height: auto;
}

.tag-show {
  margin: 0px 4px 6px 0px;
  color: #525252!important;
  background: #F3EFFA!important;
  border: 0px!important;
}

.selected {
  background-color: #00857F!important;
  color: white!important;
}

.select, .select select {
  width: 100%;
}


.select:not(.is-multiple):not(.is-loading)::after {

  top: 14px;
}

.featured {
  border: 8px solid #C5AFE5;
}

.filters {

  padding: 0px 13px 0px 11px!important;
  border-radius: 4px!important;
  /*border: 2px solid #6A6A6A!important;*/
  border: 1px solid #C6C6C6!important;
  /*gap: 8px!important;*/
  font-family: Lato!important;
  font-size: 14px!important;
  font-weight: 500!important;
  line-height: 34!important;
  height: 36px!important;
  letter-spacing: 0em!important;
  /*color: #111111!important;
  background: var(--surface-min-contrast, #FAF8FF);*/

}

.filters img {
  margin-right: 6px;
  display: block;
  float: left;
}

.filters span {
  display: block;
  float: left;
  margin-bottom: 1px;
}

.filter-input-with-button {
  float:left;
  width: calc(100% - 80px);
}

.filter-button {
  float:left;
  width: 80px;
  text-align: right;
    height: 40px;
}

.filter-button button {
  width: 72px;
    height: 100%;
}



.projectsearch {
  max-width: 400px;
  width: 100%!important;
  padding: 8px 16px 8px 38px!important;
  padding-left: 38px;
  border-radius: 4px!important;
  border: 1px solid #C6C6C6!important;
  gap: 4px!important;
  /*font-family: Inter!important;*/
  font-size: 14px!important;
  font-weight: 500!important;
  line-height: 24px!important;
  letter-spacing: 0em!important;
}

.button-glow {
    box-shadow: 0 0 10px #00857F, 0 0 20px #00857F, 0 0 30px #00857F;
    transition: box-shadow 0.3s ease;
}

.button-glow-secondary {
    box-shadow: 0 0 10px #6c757d, 0 0 20px #6c757d, 0 0 30px #6c757d;
    transition: box-shadow 0.3s ease;
}

.search-container {
    position: relative;
    width: 400px; /* Adjust as needed */
}

.search-icon {
    position: absolute;
    top: 53%;
    left: 15px; /* Adjust to move the icon left/right */
    transform: translateY(-50%);
    color: #333;
    pointer-events: none;
    z-index: 20;
}



input::placeholder, textarea::placeholder {
  opacity: 1 !important;
  color: #888888 !important;
}

/* Default color for the placeholder "Month" */
.placeholder {
    color: #888888;
}

/* Reset color for selected options */
select {
    color: #363636;
}

#projects-top-container {
  position: relative;
}

.relevantdropdown {

  border-radius: 4px!important;
  border: 1px solid #6A6A6A!important;
  color: #111111!important;
  //styleName: Label-medium;
  font-family: Lato!important;
  font-size: 14px!important;
  font-weight: 500!important;
  line-height: 20px!important;
  letter-spacing: 0em!important;
  padding-right: 2em!important;
  width: auto!important;
}
.select::after {
  margin-top: -.10em!important;
}

.project-card-image {
  position: relative;
}

.rounded {
  border-radius: 8px;
  overflow: hidden;
}

.rounded img {
  border-radius: 8px;
  overflow: hidden;
}

.project-drawings {
  width: 75%;
  margin: auto;
  margin-top: 40px;
  border-radius: 10px;
  border: 20px solid #C5AFE5;
}

.project-drawings-container {
  border-radius: 10px;
  background-color: white;
  margin: 20px;
}

.project-drawings-thumbs-container {
  display: flex;
  align-items: center;
  border-top: 20px solid #C5AFE5;
  position: relative;
}

.project-drawings-thumbs {
  display: flex;
  flex-shrink: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  width: 100%;
}

.project-drawings-thumbs img {
  max-width: 20%;
  display: block;
  border-right: 20px solid #C5AFE5;
  padding: 8px;
  max-height: 75px;
}

.project-drawings-thumbs img:last-child {
  border-right: 0px!important;
}

.carousel-button {
  background-color: #C5AFE5;
  border: none;
  color: white;
  width: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font-size: 20px;
  border-radius: 20px;
  cursor: pointer;
}

.carousel-button.left {
  left: -30px;
}

.carousel-button.right {
  right: -30px;
}


.project-header .title {
  font-family: Lato;
  font-size: 21px;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 0px;
}

.project-header .architects {
  font-family: Lato;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.project-details {
  font-family: Lato;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin: 20px 0px 0px 40px;
}

.project-details .architects-logo {
  width: 40px;
  height: 40px;
  float: left;
  border-radius: 2px;
  background: #eeeeee;
  overflow: hidden;
}

.project-details .architects-info {
  float: left;
  margin-left: 18px;
  margin-bottom: 24px;
}

.architects-info .architects-title {
  font-family: Lato;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

.architects-info .architects-name {
  font-family: Lato;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
}

.project-details strong {
  padding-right: 20px;
  display: block;
  float: left;
}

.project-desc {

}

.project-desc-container {
  padding: 16px;
  background: #FAF8FF;

}

.project-desc div.project-desc-content {
  font-family: Lato;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

.project-desc div.project-desc-title {
  //styleName: Label-medium;
  font-family: Lato;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  padding-bottom: 20px;
}

.project-body {
  margin-top: 28px;
}

.project-main-image {
  position: relative;
}
.project-card-content {
  height: 48px;
  padding: 12px;
  font-size: 12px!important;
  line-height: 24px!important;
}

.project-card-content .fa-user {
  display: block;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  background-color: #111111;
  color: white;
  line-height: 24px;
  float: left;
  text-align: center;
  margin-right: 10px;
}

.project-title {
  position: absolute;
  color: white;
  z-index: 2;
  //styleName: Label-medium;
  font-family: Lato;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  /*bottom: 10px;
  left: 11px;*/
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 30px 11px 10px 11px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
  margin-bottom: 0px!important;
  opacity: 0; /* Make .project-funcs invisible by default */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}



/* mypage */

.icon-fixed-width {
    width: 24px; /* Set a fixed width */
    text-align: center; /* Center the icon */
    display: inline-block; /* Allows the width to be set and centers the content */
}

/* toggleSwitch */
.toggledot {
  height: 20px; /* Height of the dot */
  width: 20px; /* Width of the dot */
  background-color: #ffffff; /* Color of the dot */
  transition: transform 0.3s;
  position: absolute; /* Positioning */
  top: -2px; /* Distance from the top of the toggle block */
  left: -10px; /* Distance from the left when inactive */
  /*bottom: 0.25rem;*/ /* Distance from the bottom */
  border: 1px solid #cccccc; /* Border around the dot */
  border-radius: 50%; /* Round shape */
}

input:checked ~ .toggledot {
  transform: translateX(27px); /* Distance to slide */
}

input:checked ~ .toggleblock {
  background-color: #00857F; /* TailwindCSS green-400 or any color you want for the active state */
}

.toggleblock {
  width: 27px; /* Width of the toggle block */
  height: 16px; /* Height of the toggle block */
  transition: background-color 0.3s;
  background-color: #d1d5db; /* Initial color */
  border-radius: 9999px; /* Full round edges */
  position: relative; /* Needed to position the dot absolutely */
  display: flex; /* To center the dot vertically */
  align-items: center; /* Align the dot vertically */
}

.sort-dropdown-div-auth {
  position: absolute;
  right: 2px;
  bottom: 0px;
}

.sort-dropdown-div-guest {
  position: absolute;
  right: 20px;
  top: 150px;
}

.profile-image-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 3px;
  background-color: #EFEFEF;

}

#profile-pic {
  float: left;
}

.project-parent {
  transition: opacity 1s;
}

.projects-user-info {
  float: left;
  font-weight: 600;
}

.projects-user-follow {
  float: right;
  color: #525252;
  opacity: 0; /* Make .project-funcs invisible by default */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
  line-height: 24px;
  border-radius: 4px;
  width: 67px;
  text-align: center;
  font-weight: 600;
  background: var(--surface-min-contrast, #FAF8FF);
}

.projects-user-follow:hover {
  background: var(--surface-low-contrast, #F3EFFA);
}

.projects-user-follow.following {
  background: var(--semantic-success-container, #DEF7EA);
  color: #00857F;
  opacity: 1;
}
.biography > *{
    margin-bottom: 16px;
}

.projects-user-follow.following:hover {
  color: #525252;
  border: 1px solid #6A6A6A;
  background: white;
  line-height: 22px;
}


.projects-user-follow-func {

}

.projects-user-unfollow-func {

}



#profile-user-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* This spreads out the child elements */
  height: 70px;
}


#profile-follow {
  margin-left: 20px;
  cursor: pointer;
  line-height: 22px;

}

.profile-user-follow {
  color: #00857F;
  float: left;
}

.profile-user-followed {
    color: #009900;
    display: none;
    background-color: #007722;
    color: #fff;
    padding: 0px 9px 0px 9px;
    margin-left: -9px;
    border-radius: 11px;
    float: left;

}

#profile-available-toggler {
  float: right;
  position: relative;
}

.profile-username {
  //styleName: Label-large;
  font-family: Lato;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin-left: 20px;
}

.profile-work-experience {
  position: relative;
}

.work-experience-entry-edit {
  position: absolute;
  right: 0px;
  border-left: 1px solid #333333;
  padding-left: 8px;
  cursor: pointer;
  display: none;
}

.work-experience-entry-save {
  position: absolute;
  right: 0px;
  border-left: 1px solid #333333;
  padding-left: 8px;
  cursor: pointer;
}

.work-experience-entry input, .work-experience-entry textarea, .work-experience-entry select {
  margin: 2px;
}

.work-experience-entry:hover .work-experience-entry-edit {
        display: block; /* Show the edit options on hover */
    }

.work-dates-div {
  float:left;
}

.work-start-month, .work-end-month {
  width: 70px;
  float: left;
  font-size: 14px;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;

}

.work-start-year, .work-end-year {
  width: 70px;
  float: left;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
}



.profile-block-main {
  margin-top: 22px;
  background: #FAF8FF;
  padding: 20px;
  position: relative;
}

.profile-block-middle {
  margin-top: 22px;
  padding: 20px;
  position: relative;
}

.profile-block-right {
  margin-bottom: 22px;
  background: #FAF8FF;
  padding: 20px;
  position: relative;
  min-height: 60px;
}

.profile-block-main p {
  padding-bottom: 15px;
}

.profile-block-main p:last-child {
  padding-bottom: 0px;
}

.profile-work-experience {
  margin-top: 28px;
}

.work-experience-title {
  //styleName: Label-large;
  font-family: Lato;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #C6C6C6;
}

.profile-block-edit-button {
  position: absolute;
  right: 20px;
  top: 20px;
}

.profile-block-add-button {

}

.work-experience-entry {
  margin-top: 35px;
  padding: 0px 60px 0px 20px;
}

.mypage-menu a {
  color: #525252;
}

.mypage-menu li {
  padding: 16px;

}

.mypage-menu li.is-active {
  font-weight: bold;
  background: #FAF8FF;
  border-radius: 3px;
}

.profile-block-edit-button div {
  float: left;
  margin-left: 20px;
  cursor: pointer;
}

.we-buttons {
  position: absolute;
  right: 20px;
  top: 0px;
  cursor: pointer;
}

.we-button {
  float: right;
  margin-left: 20px;
  cursor: pointer;
}

.work-experience-item {
  float: left;
}

.work-role {
  //styleName: Label-large;
  font-family: Lato;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  float: left;
}

.work-dates {
  //styleName: Body-medium;
  font-family: Lato;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  float: right;
}

.work-company-name {
  //styleName: Label-medium;
font-family: Lato;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: left;
margin-top: 16px;

}

.work-description {
  //styleName: Body-medium;
font-family: Lato;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;

}

.modal {
  z-index: 150;
}

.fa-pencil {
  color: #999999;
}

.fa-save {
  color: #777777;
}

.fa-filter {
  color: #666666;
}

.modal-background {
  background-color: rgba(10,10,10,.36);
}

.arkiste-close-modal {
  color: #666666;
  position: absolute;
  right: 13px;
  top: 9px;
  display: block;
  font-size: 18px;
}

.modal-card {
  border-radius: 6px;
}

.modal-card-head {
  padding-top: 0px;
  padding-bottom: 0px;
  border: 0px;
  background-color: #ffffff;
}

.modal-card-foot {
  border: 0px;
  border-top: 1px solid #666666;
  background-color: #ffffff;
}

#filtersModal label {
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 10px;
}

#filtersModal .tag {
  margin: 0px 4px 6px 0px;
}

#filtersModal select {
  border-width: 0px 0px 1px 0px;
  border-radius: 0px;
  border-color: #00857F;
}



.select::after {
  border-color: #666!important;
}



.arkiste-modal-button {
  width: 50%;
}

.modal-card-foot {
  padding-left: 0px;
  padding-right: 0px;
}

.modal-card-foot .button:not(:last-child) {
  margin-right: 1em;
}

.modal-card-foot-wrapper {
  padding: 0px 20px 0px 20px;
  background-color: #ffffff;
  padding-top: 20px;
}

.filter-results {
  //styleName: Body-medium;
  font-family: Lato;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  margin-bottom: 10px;
  float: left;
}

.clear-filters {
  margin-bottom: 10px;
  float: left;
  margin-left: 30px;
}

.clear-filters-link {
  //styleName: Button-regular;
  font-family: Lato;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
  color: #00857F;
}

.active-filter-tags {
  margin-left: 8px;
  margin-top: 6px;
  margin-bottom: 6px;
}


.active-filter-tags .tag {
  margin-right: 4px;
}

.active-filter-tags .tag:last-child {
  margin-right: 0px!important;
}


.filters-active {
  border: 2px solid #6A6A6A!important;
  background-color: #F3EFFA;
  font-weight: 700!important;

}

#topic-filter, #location-filter {
  margin-bottom: 0.75rem;
}

.profile-tags {
  margin-top: 15px;
}



.project-view {
  padding-top: 40px;
}

.project-functions {
  float: right;
}

.project-function {
  float: left;
  margin-left: 14px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #999999;
  line-height: 40px;
  text-align: center;
  font-size: 19px;
  color: #333333;
  cursor: pointer;
  position: relative;
}

.project-function:hover {
  background: #eeeeee;
}

.project-function-share {
  line-height: 38px;
}

.project-function-share i {
  margin-left: 4px;
}

/* Container for both main content and comments */
.project-content-container {
  transition: padding-right 1s; /* Smooth slide effect for the main content */

  position: relative;
}

/* Adjust the main content when comments are open */
.project-content-container.with-comments {
  padding-right: 20%; /* The same width as the comment section */
}

/* Comments container styles */
.project-comments-container {
  position: fixed; /* or absolute, depending on layout */
  top: 59px;
  right: -20%; /* Start off-screen */
  width: 20%; /* Or the width you desire */
  height: 100%;
  background-color: #fff; /* Or any color */
  transition: right 1s; /* Smooth slide effect */
  /* Other styles for the comment section */
  z-index: 9999;
  border-left: 1px solid #999999;
  padding: 46px 20px 20px 30px;
}

#newCommentText {
  /* height: 40px; Removed to allow dynamic height */
  height: 40px; /* Set a minimum height */
  width: 100%;
  resize: none;
  border: 1px solid #666666;
  border-radius: 4px;
  line-height: 20px;
  padding: 10px;
  overflow-y: hidden; /* Prevent scrollbar */
}

/* Slide in effect for comments */
.project-comments-container.open {
  right: 0;
  z-index: 1;
}

.comment {
  margin-top: 40px;
}

.comment .user {
  margin-bottom: 8px;
}

.comment .comment-text {
  margin-bottom: 8px;
}

.comment .user-name {
  font-weight: 600;
  line-height: 24px;
}

.comment .fa-user {
  display: block;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  background-color: #eeeeee;
  line-height: 24px;
  float: left;
  text-align: center;
  margin-right: 6px;
}

#commentsList {
  overflow: auto;
  height: calc(100% - 100px);
}

.tooltip {
    position: absolute;
    background-color: #555;
    color: white;
    text-align: center;
    padding: 0px 10px;
    border-radius: 6px;
    z-index: 1;
    display:none;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    white-space: nowrap;
    top: 0px;
    right: 54px;
}

#noComments {
  margin-top: 40px;
}

.tag-category {
  float: left;
  background-color: #F3EFFA;
  padding: 6px;
  border-radius: 8px;
  margin-right: 20px;
  margin-bottom: 8px;
}

#loading {
  display:none;
  text-align: center;
  width: 100%;
}

#nomoreprojects {
  display:none;
  text-align: center;
  width: 100%;
}

#loadingWrapper {
  height: 100px;
  width: 100%;
}

#auth-modal .modal-card {

    width: 320px;

  text-align: center;
  }

.auth-modal-title {
  font-family: Lato;
  font-size: 21px;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 0px;
}

#jobs-modal .modal-card {

    width: 320px;
    font-size: 16px;
    text-align: center;
  }

.modal-title {
  font-family: Lato;
  font-size: 25px;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 0px;
}

#jobs {
  cursor: pointer;
}

/* FOOTER */

/*.main-footer .container {
  max-width: 100%!important;
}*/

.footer {
    padding: 20px 0;
    background-color: white;
}

/*.footer .container {
    max-width: 1200px;
    margin: 0 auto;
}
*/
.footer .columns {
    margin: 0;
}

.footer .column {
    /*display: flex;
    align-items: center;
    justify-content: space-between;*/
}

.footer, .footer a {
  color: #111111;
}

.footer .column.is-half {
    flex: 0 0 50%;
}

.footer .has-text-right {
    text-align: right;
}

.footer hr {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid #C6C6C6;
    width: 100%;
}

.footer .social-icons a {
    margin-left: 16px;
    display: inline-block;
}

.footer .social-icons img {
    width: 24px;
    height: 24px;
}

.footer .columns {
  width: 100%;
}

.footer .column {
  padding-top: 0px;
  padding-bottom: 0px;
}

.footer .terms-privacy {
  font-size: 12px;
  font-weight: 600;
}

.footer .terms-privacy a {
  margin-right: 16px;
}

.error {
  border-color: red;
}

.coverimage {
    /*position: relative;
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border 0.3s ease;*/
}

.coverimage.dragover {
    border-color: #666;
}

.coverimage .upload-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 16px;
    text-align: center;
}

.coverimage img {
    max-width: 100%;
    height: auto;
    display: none; /* Hide image initially */
}


.upload-media {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.upload-media .upload-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.upload-media, .upload-drawings {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.upload-media .upload-icon, .upload-drawings .upload-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.project-edit-funcs {
    width: 150px;
    padding: 16px;
    background-color: #FAF8FF;
    border-radius: 4px;
    position: fixed;
}

.project-edit-funcs .Button-secondary {
  width: 40px;
  height: 40px;
  padding: 8px;
}

.project-edit-funcs-title {
  font-size: 14px;
  font-weight: 500;
}

.subtitle {
  //styleName: Desktop/H2;
  font-family: Lato;
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
}

.x-of-y {
  //styleName: Body-medium;
  font-family: Lato;
  font-size: 14px!important;
  font-weight: 400;
  line-height: 20px;
}

.profile-container a:not(.button) {
  font-family: Lato;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--text-and-icon-emphasis, #00857F);
}

.profile-container .title {
  //styleName: Desktop/H2;
  font-family: Lato;
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  margin-bottom: 48px;

}

.checkmark {
  background-color: #e9ffea;
  padding: 8px;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  gap: 8px;
  border-radius: 60px;
  background-color: #fbf9fe;
  border: 2px dashed #BBC7DA;
  margin-bottom: 48px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.social-link{
  width: 23px;
  height: 23px;
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .6;
}
.socials input{
  margin-top: 3px;
  background-size: 20px;
  background-position-x: 10px;
  background-position-y: center;
  padding-left: 40px;
  background-repeat: no-repeat;
}
input.linkedin,
.linkedin-link
{
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2057_5955)'%3E%3Cpath d='M23.2208 0H2.76088C1.78079 0 0.988281 0.773438 0.988281 1.72969V22.2656C0.988281 23.2219 1.78079 24 2.76088 24H23.2208C24.2009 24 24.9981 23.2219 24.9981 22.2703V1.72969C24.9981 0.773438 24.2009 0 23.2208 0ZM8.11151 20.4516H4.54755V8.99531H8.11151V20.4516ZM6.32953 7.43438C5.18531 7.43438 4.2615 6.51094 4.2615 5.37187C4.2615 4.23281 5.18531 3.30937 6.32953 3.30937C7.46906 3.30937 8.39287 4.23281 8.39287 5.37187C8.39287 6.50625 7.46906 7.43438 6.32953 7.43438ZM21.4482 20.4516H17.8889V14.8828C17.8889 13.5563 17.8655 11.8453 16.0366 11.8453C14.1843 11.8453 13.9029 13.2938 13.9029 14.7891V20.4516H10.3484V8.99531H13.7623V10.5609H13.8092C14.2828 9.66094 15.4458 8.70938 17.1762 8.70938C20.7823 8.70938 21.4482 11.0813 21.4482 14.1656V20.4516V20.4516Z' fill='%237777A4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2057_5955'%3E%3Crect width='24.0098' height='24' fill='white' transform='translate(0.988281)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
input.facebook,
.facebook-link {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2057_4458)'%3E%3Cpath d='M12.9932 0C6.36312 0 0.988281 5.37264 0.988281 12C0.988281 17.6275 4.86443 22.3498 10.0933 23.6467V15.6672H7.61788V12H10.0933V10.4198C10.0933 6.33552 11.9425 4.4424 15.9541 4.4424C16.7147 4.4424 18.0271 4.59168 18.564 4.74048V8.06448C18.2806 8.03472 17.7884 8.01984 17.1771 8.01984C15.2088 8.01984 14.4482 8.76528 14.4482 10.703V12H18.3695L17.6958 15.6672H14.4482V23.9122C20.3925 23.1946 24.9986 18.1354 24.9986 12C24.9981 5.37264 19.6233 0 12.9932 0Z' fill='%237777A4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2057_4458'%3E%3Crect width='24.0098' height='24' fill='white' transform='translate(0.988281)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
input.instagram,
.instagram-link {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2057_4438)'%3E%3Cpath d='M12.9932 2.16094C16.2008 2.16094 16.5806 2.175 17.8421 2.23125C19.0144 2.28281 19.6475 2.47969 20.0695 2.64375C20.6276 2.85938 21.0309 3.12188 21.4482 3.53906C21.8703 3.96094 22.1282 4.35938 22.3439 4.91719C22.508 5.33906 22.705 5.97656 22.7566 7.14375C22.8128 8.40937 22.8269 8.78906 22.8269 11.9906C22.8269 15.1969 22.8128 15.5766 22.7566 16.8375C22.705 18.0094 22.508 18.6422 22.3439 19.0641C22.1282 19.6219 21.8656 20.025 21.4482 20.4422C21.0262 20.8641 20.6276 21.1219 20.0695 21.3375C19.6475 21.5016 19.0097 21.6984 17.8421 21.75C16.5759 21.8063 16.1961 21.8203 12.9932 21.8203C9.78563 21.8203 9.40579 21.8063 8.14434 21.75C6.97198 21.6984 6.33891 21.5016 5.91686 21.3375C5.35882 21.1219 4.95553 20.8594 4.53817 20.4422C4.11612 20.0203 3.85821 19.6219 3.64249 19.0641C3.47836 18.6422 3.28141 18.0047 3.22982 16.8375C3.17355 15.5719 3.15948 15.1922 3.15948 11.9906C3.15948 8.78438 3.17355 8.40469 3.22982 7.14375C3.28141 5.97187 3.47836 5.33906 3.64249 4.91719C3.85821 4.35938 4.12081 3.95625 4.53817 3.53906C4.96022 3.11719 5.35882 2.85938 5.91686 2.64375C6.33891 2.47969 6.97667 2.28281 8.14434 2.23125C9.40579 2.175 9.78563 2.16094 12.9932 2.16094ZM12.9932 0C9.73405 0 9.32607 0.0140625 8.04586 0.0703125C6.77034 0.126563 5.89341 0.332812 5.13373 0.628125C4.34122 0.9375 3.67063 1.34531 3.00473 2.01562C2.33414 2.68125 1.92617 3.35156 1.61666 4.13906C1.32123 4.90313 1.1149 5.775 1.05862 7.05C1.00235 8.33437 0.988281 8.74219 0.988281 12C0.988281 15.2578 1.00235 15.6656 1.05862 16.9453C1.1149 18.2203 1.32123 19.0969 1.61666 19.8563C1.92617 20.6484 2.33414 21.3188 3.00473 21.9844C3.67063 22.65 4.34122 23.0625 5.12904 23.3672C5.89341 23.6625 6.76565 23.8687 8.04117 23.925C9.32138 23.9812 9.72936 23.9953 12.9885 23.9953C16.2477 23.9953 16.6556 23.9812 17.9358 23.925C19.2114 23.8687 20.0883 23.6625 20.848 23.3672C21.6358 23.0625 22.3064 22.65 22.9723 21.9844C23.6382 21.3188 24.0508 20.6484 24.3557 19.8609C24.6511 19.0969 24.8574 18.225 24.9137 16.95C24.97 15.6703 24.984 15.2625 24.984 12.0047C24.984 8.74688 24.97 8.33906 24.9137 7.05938C24.8574 5.78438 24.6511 4.90781 24.3557 4.14844C24.0602 3.35156 23.6522 2.68125 22.9817 2.01562C22.3158 1.35 21.6452 0.9375 20.8574 0.632812C20.093 0.3375 19.2207 0.13125 17.9452 0.075C16.6603 0.0140625 16.2523 0 12.9932 0Z' fill='%237777A4'/%3E%3Cpath d='M12.9928 5.83594C9.58824 5.83594 6.82617 8.59688 6.82617 12C6.82617 15.4031 9.58824 18.1641 12.9928 18.1641C16.3973 18.1641 19.1593 15.4031 19.1593 12C19.1593 8.59688 16.3973 5.83594 12.9928 5.83594ZM12.9928 15.9984C10.784 15.9984 8.99268 14.2078 8.99268 12C8.99268 9.79219 10.784 8.00156 12.9928 8.00156C15.2015 8.00156 16.9928 9.79219 16.9928 12C16.9928 14.2078 15.2015 15.9984 12.9928 15.9984Z' fill='%237777A4'/%3E%3Cpath d='M20.8441 5.59214C20.8441 6.38902 20.197 7.0312 19.4045 7.0312C18.6073 7.0312 17.9648 6.38433 17.9648 5.59214C17.9648 4.79526 18.612 4.15308 19.4045 4.15308C20.197 4.15308 20.8441 4.79995 20.8441 5.59214Z' fill='%237777A4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2057_4438'%3E%3Crect width='24.0098' height='24' fill='white' transform='translate(0.988281)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
input.tiktok,
.tiktok-link {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 250 250'%3E%3Cg clip-rule='evenodd' fill-rule='evenodd'%3E%3Cpath d='M25 0h200c13.808 0 25 11.192 25 25v200c0 13.808-11.192 25-25 25H25c-13.808 0-25-11.192-25-25V25C0 11.192 11.192 0 25 0z' fill='%237777A4'/%3E%3Cpath d='M156.98 230c7.607 0 13.774-6.117 13.774-13.662s-6.167-13.663-13.774-13.663h-2.075c7.607 0 13.774 6.118 13.774 13.663S162.512 230 154.905 230z' fill='%23ee1d51'/%3E%3Cpath d='M154.717 202.675h-2.075c-7.607 0-13.775 6.118-13.775 13.663S145.035 230 152.642 230h2.075c-7.608 0-13.775-6.117-13.775-13.662s6.167-13.663 13.775-13.663z' fill='%2366c8cf'/%3E%3Cellipse cx='154.811' cy='216.338' fill='%237777A4' rx='6.699' ry='6.643'/%3E%3Cpath d='M50 196.5v6.925h8.112v26.388h8.115v-26.201h6.603l2.264-7.112zm66.415 0v6.925h8.112v26.388h8.115v-26.201h6.603l2.264-7.112zm-39.81 3.93c0-2.17 1.771-3.93 3.959-3.93 2.19 0 3.963 1.76 3.963 3.93s-1.772 3.93-3.963 3.93c-2.188-.001-3.959-1.76-3.959-3.93zm0 6.738h7.922v22.645h-7.922zM87.924 196.5v33.313h7.925v-8.608l2.453-2.248L106.037 230h8.49l-11.133-16.095 10-9.733h-9.622l-7.923 7.86V196.5zm85.47 0v33.313h7.926v-8.608l2.452-2.248L191.509 230H200l-11.133-16.095 10-9.733h-9.622l-7.925 7.86V196.5z' fill='%23ffffff'/%3E%3Cpath d='M161.167 81.186c10.944 7.819 24.352 12.42 38.832 12.42V65.755a39.26 39.26 0 0 1-8.155-.853v21.923c-14.479 0-27.885-4.601-38.832-12.42v56.835c0 28.432-23.06 51.479-51.505 51.479-10.613 0-20.478-3.207-28.673-8.707C82.187 183.57 95.23 189.5 109.66 189.5c28.447 0 51.508-23.047 51.508-51.48V81.186zm10.06-28.098c-5.593-6.107-9.265-14-10.06-22.726V26.78h-7.728c1.945 11.09 8.58 20.565 17.788 26.308zm-80.402 99.107a23.445 23.445 0 0 1-4.806-14.256c0-13.004 10.548-23.547 23.561-23.547a23.6 23.6 0 0 1 7.147 1.103V87.022a51.97 51.97 0 0 0-8.152-.469v22.162a23.619 23.619 0 0 0-7.15-1.103c-13.013 0-23.56 10.543-23.56 23.548 0 9.195 5.272 17.157 12.96 21.035z' fill='%23ee1d52'/%3E%3Cpath d='M153.012 74.405c10.947 7.819 24.353 12.42 38.832 12.42V64.902c-8.082-1.72-15.237-5.942-20.617-11.814-9.208-5.743-15.843-15.218-17.788-26.308H133.14v111.239c-.046 12.968-10.576 23.468-23.561 23.468-7.652 0-14.45-3.645-18.755-9.292-7.688-3.878-12.96-11.84-12.96-21.035 0-13.005 10.547-23.548 23.56-23.548 2.493 0 4.896.388 7.15 1.103V86.553c-27.945.577-50.42 23.399-50.42 51.467 0 14.011 5.597 26.713 14.68 35.993 8.195 5.5 18.06 8.707 28.673 8.707 28.445 0 51.505-23.048 51.505-51.479z' fill='%23ffffff'/%3E%3Cpath d='M191.844 64.902v-5.928a38.84 38.84 0 0 1-20.617-5.887 38.948 38.948 0 0 0 20.617 11.815zM153.439 26.78a39.524 39.524 0 0 1-.427-3.198V20h-28.028v111.24c-.045 12.967-10.574 23.467-23.56 23.467-3.813 0-7.412-.904-10.6-2.512 4.305 5.647 11.103 9.292 18.755 9.292 12.984 0 23.515-10.5 23.561-23.468V26.78zm-44.864 59.773v-6.311a51.97 51.97 0 0 0-7.067-.479C73.06 79.763 50 102.811 50 131.24c0 17.824 9.063 33.532 22.835 42.772-9.083-9.28-14.68-21.982-14.68-35.993 0-28.067 22.474-50.889 50.42-51.466z' fill='%2369c9d0'/%3E%3Cpath d='M154.904 230c7.607 0 13.775-6.117 13.775-13.662s-6.168-13.663-13.775-13.663h-.188c-7.607 0-13.774 6.118-13.774 13.663S147.109 230 154.716 230zm-6.792-13.662c0-3.67 3-6.643 6.7-6.643 3.697 0 6.697 2.973 6.697 6.643s-3 6.645-6.697 6.645c-3.7-.001-6.7-2.975-6.7-6.645z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
}
input.web,
.web-link{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' width='800px' height='800px' viewBox='-1 0 19 19' class='cf-icon-svg'%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='%237777A4' d='M16.5 9.5a8 8 0 1 1-8-8 8 8 0 0 1 8 8zm-2.97.006a5.03 5.03 0 1 0-5.03 5.03 5.03 5.03 0 0 0 5.03-5.03zm-7.383-.4H4.289a4.237 4.237 0 0 1 2.565-3.498q.1-.042.2-.079a7.702 7.702 0 0 0-.907 3.577zm0 .8a7.7 7.7 0 0 0 .908 3.577q-.102-.037-.201-.079a4.225 4.225 0 0 1-2.565-3.498zm.8-.8a9.04 9.04 0 0 1 .163-1.402 6.164 6.164 0 0 1 .445-1.415c.289-.615.66-1.013.945-1.013.285 0 .656.398.945 1.013a6.18 6.18 0 0 1 .445 1.415 9.078 9.078 0 0 1 .163 1.402zm3.106.8a9.073 9.073 0 0 1-.163 1.402 6.187 6.187 0 0 1-.445 1.415c-.289.616-.66 1.013-.945 1.013-.285 0-.656-.397-.945-1.013a6.172 6.172 0 0 1-.445-1.415 9.036 9.036 0 0 1-.163-1.402zm1.438-3.391a4.211 4.211 0 0 1 1.22 2.591h-1.858a7.698 7.698 0 0 0-.908-3.577q.102.037.201.08a4.208 4.208 0 0 1 1.345.906zm-.638 3.391h1.858a4.238 4.238 0 0 1-2.565 3.498q-.1.043-.2.08a7.697 7.697 0 0 0 .907-3.578z'/%3E%3C/svg%3E");
}
input.web{
  background-size: 23px;
  background-position-x: 9px;
}
.web-link{
  background-size: 27px;
}
@media screen and (max-width: 970px) {
  #projects-title-and-funcs {
    position: relative!important;
    top: 0px!important;
  }

  #filters-container {
    padding-top: 0px!important;
  }
}

@media screen and (max-width: 768px) {
  .main-title, .main-tagline {
    text-align: left;
  }

  #filter-button-text {
    display: none;
  }

  .filters img {
    margin-right: 0px!important;
  }

  .filters {
    padding: 0px 9px!important;
    margin-top: 3px;
    margin-right: 16px;
  }

  .level-item {
    float: left;
  }

  .split.left {
    display:none;
  }

  .split {
    width: 100%!important;
  }

  #main-content {
    margin-left: 4px;
    margin-right: 4px;
  }
}

@media screen and (max-width: 485px) {
  .projectsearch, .level-item-search,  .level-item-search div {
    width: 300px!important;
  }
}

@media screen and (max-width: 1023px) {
  .navbar {
    min-height: 72px;
  }

  .sort-dropdown-div {
    position: relative;
    float: right;
    margin-top: 8px;
    top: auto;
    right: auto;
  }
}