/*
Theme Name:   WEB-NUZP
Theme URI:    https://zp.edu.ua/
Author:       National University «Zaporizhzhia Polytechnic»
*/

html {
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: clip;
  position: relative;
}

.custom-logo-link {
  display: block;
  max-width: 3.5rem;
  width: 100%;
  cursor: pointer;
}

.custom-logo-link img,
.custom-logo-link svg {
  width: 100%;
  height: auto;
}

input,
textarea {
  width: 100%;
  border: unset;
  border-radius: 0;
  -webkit-border-radius: 0;
  -webkit-appearance: none;
  border-bottom: 1px solid var(--color-border-strong);
  background-color: transparent;
  padding: unset;
  padding-top: 3px;
  -webkit-transition: border 0.3s ease;
  transition: border 0.3s ease;
  font-weight: 400;
  color: var(--color-text-primary);
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

@media (min-width: 900px) {
  input,
  textarea {
    padding-bottom: 1.0625rem;
    font-size: 1.5rem;
  }
}

@media (max-width: 899px) {
  input,
  textarea {
    padding-bottom: 0.5rem;
    font-size: 1rem;
  }
}

@media (min-width: 900px) {
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    font-weight: 400;
  }
  input::-moz-placeholder,
  textarea::-moz-placeholder {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    font-weight: 400;
  }
  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    font-weight: 400;
  }
  input::-ms-input-placeholder,
  textarea::-ms-input-placeholder {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    font-weight: 400;
  }
  input::placeholder,
  textarea::placeholder {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    font-weight: 400;
    opacity: 1;
  }
}

@media (max-width: 899px) {
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 400;
  }
  input::-moz-placeholder,
  textarea::-moz-placeholder {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 400;
  }
  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 400;
  }
  input::-ms-input-placeholder,
  textarea::-ms-input-placeholder {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 400;
  }
  input::placeholder,
  textarea::placeholder {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 400;
    opacity: 1;
  }
}

label.incorrect input {
  border-color: var(--color-error);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

form label {
  display: block;
}

form div {
  color: var(--color-text-primary);
}

form div span {
  display: block;
  font-weight: 300;
  line-height: 140%;
  font-size: 0.625rem;
}

form div strong {
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.625rem;
  color: var(--color-error);
}

form div strong::before {
  content: "";
  -webkit-box-flex: 0;
  -ms-flex: 0 0 0.3125rem;
  flex: 0 0 0.3125rem;
  height: 5px;
  margin-right: 0.25rem;
  background-image: url(../assets/img/label-incorrect-input.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

label.incorrect strong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

form p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

form p > * + * {
  margin-top: 1.0625rem;
}

form button[type="submit"],
form input[type="submit"] {
  position: relative;
  z-index: 0;
  max-width: 15.625rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 0;
  border-radius: 3.125rem;
  padding: 0.625rem 1.875rem;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  font-size: 1rem;
  line-height: 118.75%;
  font-weight: 400;
  color: var(--color-text-heading);
  background-color: var(--color-bg-primary);
}

@media (min-width: 900px) {
  form button[type="submit"],
  form input[type="submit"] {
    padding: 0.9375rem 1.75rem;
  }
}

@media (max-width: 899px) {
  form button[type="submit"],
  form input[type="submit"] {
    padding: 0.9375rem 1.125rem;
  }
}

form .form-group .control-label {
  display: block;
  font-weight: 300;
  line-height: 140%;
  font-size: 0.625rem;
}

form .form-group .ec-error {
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition:
    opacity 0.3s ease,
    visibilty 0.3s ease;
  transition:
    opacity 0.3s ease,
    visibilty 0.3s ease;
  font-size: 0.625rem;
  color: var(--color-error);
}

form .form-group .ec-error::before {
  content: "";
  -webkit-box-flex: 0;
  -ms-flex: 0 0 0.3125rem;
  flex: 0 0 0.3125rem;
  height: 5px;
  margin-right: 0.25rem;
  background-image: url(../assets/img/label-incorrect-input.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.form-group.has-error .ec-error {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

._btn {
  position: relative;
  z-index: 0;
  max-width: 15.625rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 0;
  border-radius: 3.125rem;
  padding: 0.625rem 1.875rem;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  font-size: 1rem;
  line-height: 118.75%;
  font-weight: 400;
  color: var(--color-text-heading);
  background-color: var(--color-bg-primary);
}

._btn-colored {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 0.625rem 1.25rem;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  line-height: 150%;
  color: currentColor;
  text-decoration: none;
}

@media (min-width: 900px) {
  ._btn-colored {
    font-size: 1rem;
  }
}

@media (max-width: 899px) {
  ._btn-colored {
    font-size: 0.875rem;
  }
}

html:not(.v-mobile) ._btn-colored:hover {
  text-decoration: none !important;
}

html:not(.v-mobile) ._btn-colored:hover span {
  color: var(--color-white);
}

html:not(.v-mobile) ._btn-colored:hover::after {
  -webkit-transform: translate(0);
  transform: translate(0);
}

._btn-colored:focus-visible span {
  color: var(--color-white);
}

._btn-colored:focus-visible::after {
  -webkit-transform: translate(0);
  transform: translate(0);
}

._btn-colored::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid currentColor;
}

._btn-colored::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: currentColor;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  -webkit-transform-origin: 0;
  transform-origin: 0;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition:
    transform 0.3s ease,
    -webkit-transform 0.3s ease;
}

._btn-colored span {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  pointer-events: none;
}

._btn-colored span svg {
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition:
    transform 0.3s,
    -webkit-transform 0.3s;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@media (min-width: 900px) {
  ._btn-colored span svg {
    max-width: 1.5rem;
    margin-left: 0.875rem;
  }
}

@media (max-width: 899px) {
  ._btn-colored span svg {
    max-width: 18px;
    margin-left: 0.625rem;
  }
}

._btn-colored span svg path {
  stroke: currentColor;
  -webkit-transition: stroke 0.3s ease;
  transition: stroke 0.3s ease;
}

._btn-colored._btn-light-blue {
  border: 1px solid var(--color-accent);
  background-color: var(--color-bg-primary);
  color: var(--color-link);
}

html:not(.v-mobile) ._btn-colored._btn-light-blue:hover span {
  color: var(--color-white);
}

._btn-colored._btn-light-blue:before {
  border: 1px solid var(--color-bg-primary);
}

._btn-colored._btn-light-blue:after {
  background-color: var(--color-blue-100);
}

._btn-colored._btn-blue {
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-bg-primary);
  color: var(--color-text-heading);
}

html:not(.v-mobile) ._btn-colored._btn-blue:hover span {
  color: var(--color-white);
}

._btn-colored._btn-blue:before {
  border: 1px solid var(--color-bg-primary);
}

._btn-colored._btn-blue:after {
  background-color: var(--color-blue-200);
}

._btn-colored._btn-green {
  border: 1px solid var(--color-green-100);
  background-color: var(--color-bg-primary);
  color: var(--color-green-100);
}

html:not(.v-mobile) ._btn-colored._btn-green:hover span {
  color: var(--color-white);
}

._btn-colored._btn-green:before {
  border: 1px solid var(--color-bg-primary);
}

._btn-colored._btn-green:after {
  background-color: var(--color-green-100);
}

._btn-colored._btn-orange {
  border: 1px solid var(--color-highlight);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

html:not(.v-mobile) ._btn-colored._btn-orange:hover span {
  color: var(--color-text-primary);
}

._btn-colored._btn-orange:before {
  border: 1px solid var(--color-highlight);
}

._btn-colored._btn-orange:after {
  background-color: var(--color-highlight);
}

textarea[name="textarea-774"] {
  width: 100%;
  height: 150px;
  resize: none;
  border-bottom: 1px solid var(--color-grey-100);
  color: white;
}

.page-content p {
  margin-bottom: 2rem;
}

button[type="submit"]:focus-visible svg > * {
  stroke: var(--color-accent);
}

input[type="submit"]:focus-visible svg > * {
  stroke: var(--color-accent);
}

html:not(.v-mobile) button[type="submit"]:hover svg > * {
  stroke: var(--color-accent);
}

html:not(.v-mobile) input[type="submit"]:hover svg > * {
  stroke: var(--color-accent);
}



.separate-header {
  width: calc(100% + 2 * var(--wrap-colored));
  margin-left: calc(-1 * var(--wrap-colored));
  overflow-x: hidden;
  overflow-y: visible;
}

.separate-header__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 0 var(--wrap-colored);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.separate-header__wrapper::-webkit-scrollbar {
  display: none;
}

html:not(.v-mobile) .separate-header__wrapper {
  width: 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: visible;
}

@media (min-width: 1200px) {
  .separate-header__wrapper {
    font-size: 1.25rem;
  }
}

@media (min-width: 1200px) and (min-width: 1600px) {
  .separate-header__wrapper {
    font-size: 1.375rem;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .separate-header__wrapper {
    font-size: 1.375rem;
  }
}

@media (max-width: 899px) {
  .separate-header__wrapper {
    font-size: 1.125rem;
  }
}

.separate-bullet {
  width: unset;
  height: unset;
  border-radius: unset;
  background: transparent;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 0.2;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  line-height: 117%;
  color: var(--color-white);
  position: relative;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  display: inline-block;
  pointer-events: all;
}

html:not(.v-mobile) .separate-bullet:hover {
  opacity: 1;
}

.separate-bullet:focus-visible {
  opacity: 1;
}

.separate-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}

.separate-bullet.swiper-pagination-bullet:only-child {
  display: block !important;
}

@media (min-width: 900px) {
  .separate-bullet {
    padding-bottom: 0.625rem !important;
  }
}

@media (max-width: 899px) {
  .separate-bullet {
    padding-bottom: 0.3125rem !important;
  }
}

.separate-bullet::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition:
    transform 0.3s ease,
    -webkit-transform 0.3s ease;
}

@media (min-width: 900px) {
  .separate-bullet::before {
    height: 3px;
    -webkit-transform: translateY(-0.1875rem) scaleX(0);
    transform: translateY(-0.1875rem) scaleX(0);
  }
}

@media (max-width: 899px) {
  .separate-bullet::before {
    height: 1px;
    -webkit-transform: translateY(-0.0625rem) scaleX(0);
    transform: translateY(-0.0625rem) scaleX(0);
  }
}

@media (min-width: 900px) {
  .separate-bullet.swiper-pagination-bullet-active::before {
    -webkit-transform: translateY(-0.1875rem) scaleX(1);
    transform: translateY(-0.1875rem) scaleX(1);
  }
}

@media (max-width: 899px) {
  .separate-bullet.swiper-pagination-bullet-active::before {
    -webkit-transform: translateY(-0.0625rem) scaleX(1);
    transform: translateY(-0.0625rem) scaleX(1);
  }
}

.swiper-pagination-horizontal.swiper-pagination-bullets .separate-bullet {
  margin: unset;
  margin-right: 1.764em;
  text-align: left;
}

html:not(.v-mobile)
  .swiper-pagination-horizontal.swiper-pagination-bullets
  .separate-bullet {
  margin-top: 0.5rem;
}

.swiper-pagination-horizontal.swiper-pagination-bullets
  .separate-bullet:last-child {
  margin-right: 0;
}

.separate-main {
  margin-top: 1.5rem;
}

.separate-slider.swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0 !important;
}

@media (min-width: 900px) {
  .article__content > * + * {
    margin-top: 3.75rem;
  }
}

@media (max-width: 899px) {
  .article__content > * + * {
    margin-top: 3.25rem;
  }
}

.file {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--color-bg-secondary);
  width: 100%;
  margin-bottom: 10px;
}

@media (min-width: 900px) {
  .file {
    padding: 1.5rem 2rem;
  }
}

@media (max-width: 899px) {
  .file {
    padding: 1.25rem 1.75rem;
  }
}

@media (min-width: 900px) {
  .file > * + * {
    margin-left: 1rem;
  }
}

@media (max-width: 899px) {
  .file > * + * {
    margin-left: 0.75rem;
  }
}

.file__label {
  position: relative;
  max-width: 1.875rem;
  width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.file__label img,
.file__label svg {
  width: 100%;
  height: auto;
}

.file__label .file__img__hover {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.file__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 140%;
  color: var(--color-text-muted);
}

.file__text > * + * {
  margin-top: 0.25em;
}

.file__value {
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  color: var(--color-text-primary);
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (min-width: 900px) {
  .file__value {
    font-size: 0.875rem;
  }
}

@media (max-width: 899px) {
  .file__value {
    font-size: 0.75rem;
  }
}

html:not(.v-mobile) .file:hover .file__value {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
  color: var(--color-text-heading);
}

.file:focus-visible .file__value {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
  color: var(--color-text-heading);
}
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-accent);
}

@media (min-width: 900px) {
  .two-columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (min-width: 900px) {
  .two-columns > * + * {
    margin-left: 1.875rem;
  }
}

@media (max-width: 899px) {
  .two-columns > * + * {
    margin-top: 1.875rem;
  }
}

@media (min-width: 900px) {
  .two-columns__item {
    flex-shrink: 0;
    width: calc(50% - 0.9375rem);
  }
}

@media (max-width: 899px) {
  .two-columns__item {
    width: 100%;
  }
}

.year-select {
  border-radius: 0 !important;
}

.new-breadcrumbs {
  margin-bottom: 10px;
}

.select-button {
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.675em 1em;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-card);
  cursor: pointer;
}

@media (min-width: 1921px) {
  .department__container {
    display: flex;
    justify-content: center;
  }
}

.news-feed__description__ellipsis {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  color: var(--color-text-secondary);
  opacity: 0.5;
  margin-top: 0 !important;
  transition: 0.3s color ease;
  cursor: pointer;
}

.news-feed__description a {
  color: inherit !important;
  text-decoration: none !important;
}

.worker-structure-list__item {
  height: auto;
}

.worker-structure-list__link {
  display: flex;
  align-items: center;
}

.worker-structure-list__title {
  margin: 0;
}

.reading-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reading-time svg {
  margin-right: 4px;
}

.calendar-link.google {
  background-color: var(--color-blue-050);
}

.share-link.twitter {
  background-color: var(--color-blue-050);
}

.share-link.facebook {
  background-color: var(--color-blue-050);
}

.menu-item-inactive {
  opacity: 0.6;
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.menu-item-inactive span {
  color: inherit;
  text-decoration: none;
}

.menu-item-inactive:hover {
  background: none;
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.menu-item-inactive a {
  pointer-events: none;
  cursor: not-allowed;
}

._inner-header__title__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  top: auto !important;
  bottom: auto !important;
}

.form-submit-group {
  text-align: center;
  margin-top: 20px;
}

*:not(input):not(textarea):not(select):focus {
  outline: none !important;
  box-shadow: none !important;
}

*:not(input):not(textarea):not(select):focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.article__typography .wp-container-content-5f80b302,

.simple-lightbox {
  display: none !important;
}

.fancybox__backdrop {
    background: linear-gradient(
        135deg, 
        rgba(2, 0, 36, 0.95) 0%, 
        rgba(10, 25, 70, 0.97) 50%, 
        rgba(var(--color-blue-200--rgb), 0.93) 100%
    ) !important;
}

.fancybox__container {
    --fancybox-bg: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fancybox__toolbar {
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%) !important;
}

.fancybox__container.is-closing .fancybox__backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity 0.15s ease !important;
}

.fancybox__container *,
.f-button,
.swiper-slide {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

@keyframes mobileSubMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



@media (max-width: 768px) {
  .article__container {
    padding: 0 var(--wrap) !important;
  }
  .no-padding-mobile {
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
    .fancybox__container {
        height: 100dvh !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        bottom: auto !important;
    }
}
html.with-fancybox, 
html.with-fancybox body {
    overflow: hidden !important;
    touch-action: none !important;
}