/* -------------------------------- import -----------------------------------------------*/
@font-face {
  font-family: "dsMoster";
  src: url("../fonts/ds_moster-webfont.woff2") format("woff2"),
    url("../fonts/ds_moster-webfont.woff") format("woff"),
    url("../fonts/ds_moster-webfont.ttf") format("truetype"),
    url("../fonts/ds_moster-webfont.svg") format("svg");
}

@font-face {
  font-family: "Maxima";
  src: url("../fonts/maxima-webfont.woff2") format("woff2"),
    url("../fonts/maxima-webfont.woff") format("woff"),
    url("../fonts/maxima-webfont.ttf") format("truetype"),
    url("../fonts/maxima-webfont.svg") format("svg");
}

@font-face {
  font-family: "NarbutAbetka";
  src: url("../fonts/narbutabetka-webfont.woff2") format("woff2"),
    url("../fonts/narbutabetka-webfont.woff") format("woff"),
    url("../fonts/narbutabetka-webfont.ttf") format("truetype"),
    url("../fonts/narbutabetka-webfont.svg?") format("svg");
}

@font-face {
  font-family: "OldStandard";
  src: url("../fonts/oldstandard-regular-webfont.woff2") format("woff2"),
    url("../fonts/oldstandard-regular-webfont.woff") format("woff"),
    url("../fonts/oldstandard-regular-webfont.ttf") format("truetype"),
    url("../fonts/oldstandard-regular-webfont.svg?") format("svg");
}

/* -------------------------------- var -----------------------------------------------*/
:root {
  --bg-color: #fefcd6;
  --bg-header-color: #f7edb8;
  --black: #111;
  --danger-dark: #a31523;
  --gray-dark: #383f47;
  --gray-light: #ccc;
  --old-paper: #ce953b;
}

/* -------------------------------- common -----------------------------------------------*/
body {
  background-color: var(--bg-color);
  font-family: "Open Sans", sans-serif;
}

a {
  color: var(--danger);
}

a:hover {
  color: var(--danger-dark);
}

:is(h1, h2, h3) {
  color: var(--danger);
}

:is(h1, h2, h3, h4) {
  font-family: Maxima, sans-serif;
  width: 100%;
}

h1 {
  font-size: 3rem;
  letter-spacing: 0.2rem;
  line-height: 1;
  padding: 1rem 0;
  text-align: center;
}

h2 {
  font-size: 2rem;
  letter-spacing: 0.2rem;
  padding: 1rem 0;
  text-transform: uppercase;
  width: 100%;
}

h2 a {
  color: #eb008b;
}

h3 {
  font-size: 1.4rem;
}

li {
  list-style: none;
}

p {
  line-height: 1.4;
  width: 100%;

  &>img {
    max-width: 100%;
  }
}

form {
  &.form {
    & .row {
      align-items: center;
      margin-bottom: 0.4rem;
      padding: 0.2rem 0;
    }
  }

  & label {
    font-weight: bold;
    margin: 0;
    text-align: right;
  }

  & :is(input, textarea) {
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    outline: 2px solid var(--light);

    &:focus {
      outline-color: var(--info);
    }

    &:user-valid {
      outline-color: var(--success);
    }

    &:user-invalid {
      outline-color: var(--danger);
    }
  }

  & .formNote {
    font-weight: normal;
  }
}

td {
  padding: 0 8px 6px;
}

button.close {
  cursor: pointer;
}

thead {
  background: #ffc107;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.close:focus,
.close:hover {
  color: var(--gray-light);
}

.hidden {
  display: none;
  visibility: hidden;
}

.invisible {
  opacity: 0;
}

.visible {
  opacity: 1;
}

.image {
  height: auto;
  max-width: 100%;
}

img {
  height: auto;
  margin: 0;
  padding: 0;
  width: auto;
}

select {
  border: none;
  border-radius: 4px;
  outline: 2px solid var(--light);

  &:focus {
    outline-color: var(--info);
  }
}

.star {
  color: var(--danger);
}

table {
  width: 100%;
}

table tr:nth-child(2n) {
  background: rgba(255, 193, 7, 0.1);
}

.date {
  background: #28a745;
  color: var(--light);
  margin: -10px 0 15px 0;
  padding: 2px 0 2px 5px;
  position: relative;
  z-index: -1;
}

.date:before,
.date:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
}

.date:before {
  right: 0;
  top: 0;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: skewY(-1deg);
  transform: skewY(-1deg);
}

.date:after {
  bottom: 0;
  left: 0;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: skewY(3deg);
  transform: skewY(3deg);
}

.more {
  background: #ff0;
  letter-spacing: 0.1rem;
  padding: 0 0 0 4%;
  position: relative;
}

.more:before,
.more:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
}

.more:before {
  right: 0;
  top: 0;
  -webkit-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: skewY(2deg);
  transform: skewY(2deg);
}

.more:after {
  bottom: 0;
  left: 0;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: skewY(-6deg);
  transform: skewY(-6deg);
}

/* -------------------------------- first page -----------------------------------------------*/
.row.fHeader {
  align-items: center;
  height: 120px;
  justify-content: space-around;
  padding: 1rem;
  position: relative;
}

.fPage {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}

#fContent {
  align-items: center;
  justify-content: center;
  /* height: calc(100vh - 280px); */
}

#users>a {
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#fPanel {
  margin: 1rem 0 -2rem;
}

#fPanel p {
  color: #636362;
  font-family: dsMoster;
  font-size: 1.2em;
  text-align: center;
}

#fFooter {
  padding: 1rem 0;
}

#router img {
  height: 115px;
  width: auto;
}

#users img {
  width: 75%;
}

#fFooter img {
  width: 90%;
}

#go {
  /* margin: 0px 0 1vh 0; */
  text-align: center;
}

#go i.fa.fa-chevron-down {
  color: #7cc576;
  font-size: 5rem;
}

#pagepiling {
  height: calc(100vh - 286px);
  position: relative;
}

:where(#newBook, #latestNews) h2 {
  color: #ffdc70;
  font-size: 5rem;
  letter-spacing: 0.4rem;
  line-height: 1;
  text-shadow: 1px 1px 2px #000;
  text-transform: uppercase;
  width: auto;
}

:is(.newBook, .latestNews, .artCalendar, .firstBookTravel, .firstLitMapa, .firstHero, .e_course) {
  border-radius: 16px;
  height: 450px;
}

.newBook {
  background: url(../images/bg_newbook.png) no-repeat;
  background-position: center center;
  background-size: cover;
}

.newBook .row:nth-child(1) {
  justify-content: space-around;
  padding-right: 5vw;
}

.newBook .row:nth-child(2),
.newBook .row:nth-child(3) {
  padding-left: 5vw;
}

.newBook .all {
  align-self: flex-end;
}

.newBook img {
  margin-right: 20px;
  width: auto;
}

.latestNews {
  background: url(../images/bg_latestnews.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
  padding-bottom: 1rem;
}

.date-in {
  font-size: 0.8rem;
}

.artCalendar {
  background: #000081;
}

.artCalendar iframe {
  height: 320px;
  width: 100%;
}

.firstHero {
  background: url(../images/flag_ua.png) right top no-repeat,
    url(../images/bg_hero.jpg) no-repeat;
}

.firstBookTravel {
  background: url(../images/bookTravel-100.jpg) no-repeat center var(--bg-color);
}

.firstBookTravel h3 {
  margin: 8rem 0 0 11rem;
}

.firstBookTravel a {
  color: #57278b;
  font-size: 3rem;
}

.container.firstLitMapa {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.firstLitMapa {
  background: url(../images/firstlitmapa.jpg) no-repeat center;

  & h3 {
    font-family: dsMoster;
    font-size: 2.2em;
    letter-spacing: normal;
  }

  & p {
    font-family: dsMoster;
    font-size: 1.4rem;
    line-height: 1.2;
  }
}

.e_course {
  align-items: center;
  background: url(../images/eduCourse.jpg) center no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;

  & h3 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  & p {
    color: #fff;
    font-family: sans-serif;
    margin-bottom: 1rem;
    text-align: center;
  }

  & a.button {
    background-color: #ff9900;
    border-radius: 4px;
    color: #fff;
    margin-top: 1rem;
    padding: 1rem 2rem;
    text-align: center;

    &:hover {
      color: var(--gray-dark);
      text-decoration: none;
    }
  }
}

#lendMenu {
  background: linear-gradient(to left, #599389, #a7cac4);
  height: 50px;
}

#lendMenu .navbar {
  display: flex;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

#lendMenu ul {
  width: 100%;
}

#lendMenu ul>li {
  align-items: center;
  display: flex;
  height: 50px;
  justify-content: center;
  margin: -8px 0;
  text-align: center;
  width: calc(100% / 4);
}

#lendMenu ul>li>a {
  color: var(--gray-dark);
  font-family: Maxima;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

#lendMenu ul>li.active>a {
  color: var(--light);
}

#lendMenu i {
  color: #de048c;
  font-size: 2rem;
  margin: -8px 0;
}

#lendMenu ul>li:nth-child(1) {
  background: #c889e1;
}

#lendMenu ul>li:nth-child(2) {
  background: #aded4f;
}

#lendMenu ul>li:nth-child(3) {
  background: #67b7d6;
}

#lendMenu ul>li:nth-child(4) {
  background: #5561ff;
}

#lendMenu ul>li:nth-child(5) {
  background: #f95278;
}

#lendMenu ul>li:nth-child(6) {
  background: #ccc;
}

#lendMenu.sticky-top {
  top: 135px;
  z-index: 100;
}

#mainMenu.sticky-top {
  top: 100px;
  z-index: 100;
}

#year {
  color: var(--light);
  font-size: 12rem;
  font-family: Maxima, sans-serif;
  letter-spacing: 0.1rem;
  line-height: 1;
  opacity: 0.5;
}

.all {
  color: #ffdc70;
  font-family: Maxima, sans-serif;
  font-size: 2.8rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 1rem 0;

  &:hover {
    color: var(--light);
  }
}

.all>i {
  margin-right: 10px;
}

.wrapperLatestNew {
  display: flex;
  justify-content: center;
}

.latestNew {
  background: #c889e1;
  /* background-image: linear-gradient(to top right, #c889e1, #fefcd6); */
  border-radius: 10px;
  height: 330px;
  margin-top: -0.5rem;
  padding: 10px;
  width: 260px;
  & h4{
    line-height: 1;
  }
}

.latestNew a {
  color: var(--gray-dark);
  text-align: center;
}

.latestNews .row:first-child {
  justify-content: center;
}

.wrapperNewImg {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 214px;
}

.wrapperNewImg img {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}

.container.artCalendar,
.container.firstHero {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#artCalendar {
  padding: 0;
}

#invites h2 {
  color: #cb5ca5;
  font-family: NarbutAbetka;
  font-size: 3rem;
  margin: 0;
  padding: 1rem 0 0;
  text-align: center;
}

#invites div {
  background: #ffc107;
  height: 350px;
  overflow: auto;
  padding: 1rem;
}

.firstHero div:nth-child(2) {
  align-self: flex-start;
}

.firstHero h3 {
  color: #a50142;
  font-family: dsMoster;
  font-size: 3em;
  letter-spacing: normal;
}

.firstHero p {
  color: var(--light);
  font-family: dsMoster;
  font-size: 1.4rem;
}

/* -------------------------------- header -----------------------------------------------*/
#header {
  background-color: var(--bg-header-color);
}

.row.header {
  height: 80px;
  justify-content: space-between;
  padding: 0.6rem 0;
  position: relative;
}

#logo img {
  height: 90px;
}

#title img {
  width: 50%;
}

.row.header .button-group {
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
}

.row.header .button {
  aspect-ratio: 1/1;
  background: transparent;
  border: 1px solid var(--gray-dark);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  margin-left: 8px;
  width: 36px;

  &:hover {
    color: var(--gray);
    text-decoration: none;
  }

  & i {
    font-size: 1.6rem;
    margin: auto;
  }
}

#search form {
  display: flex;
  width: 100%;
}

#search form>input[type="text"] {
  border: 1px solid #e9e5c7;
  border-radius: 16px;
  height: 38px;
  padding: 0 10px;
  width: 80% !important;
}

#search-button-container {
  height: 38px;
  position: relative;
  width: 48px;
}

input#search-button {
  border: none;
  background: none;
  cursor: pointer;
  height: 38px;
  outline: none;
  position: relative;
  width: 48px;
  z-index: 10;
}

#search-button-container>i {
  color: #b81b80;
  font-size: 2.4rem;
  line-height: 1.1rem;
  position: absolute;
  right: 0;
  top: 7px;
}

#topPanels {
  display: flex;
  margin-left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

#library,
#leisure,
#services {
  color: var(--light);
  cursor: pointer;
  height: 30px;
  font-family: Maxima;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

#library {
  background: #0054a6;
}

#leisure {
  background: #619d04;
}

#services {
  background: #b81b80;
}

:is(#library a, #leisure a, #services a) {
  color: var(--light);
  text-decoration: none;
}

.topControl {
  align-items: flex-start;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  top: 0;
}

.row.header .topControl>button {
  align-items: center;
  aspect-ratio: unset;
  border: none;
  border-radius: 0;
  justify-content: center;
  margin-left: unset;
}

.row.header .topControl button.button i {
  font-size: 1.2rem;
  line-height: unset;
}

.row.header .topControl button.button span:nth-child(1) {
  font-size: 0.8rem;
  font-weight: bold;
}

.row.header .topControl button.button span:nth-child(2) {
  font-size: 1.2rem;
  font-weight: bold;
}

/* -------------------------------- mainMenu -----------------------------------------------*/
#mainMenu {
  background: #b81b80;
}

#mainMenu .navbar,
#eMenu .navbar {
  justify-content: center;
  padding: 0;
}

#mainMenu i,
#eMenu i {
  color: var(--light);
  font-size: 2rem;
}

.mainMenu,
.eMenu {
  display: flex;
  justify-content: center;
}

.mainMenu ul>li {
  padding: 0 1rem;
}

.mainMenu ul>li>a {
  color: var(--light);
  font-family: Maxima;
  font-size: 2rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

#eMenu {
  background: rgba(115, 150, 48, 1);
  margin: 0;
  padding: 0;
}

#eMenu.sticky-top {
  top: 100px;
}

.eMenu ul>li>a {
  color: var(--light);
  font-family: NarbutAbetka;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-transform: uppercase;
}

.eMenu ul>li {
  background: #155724;
  margin: 0 3px;
  padding: 5px 1rem;
}

/* -------------------------------- breadcrumb -----------------------------------------------*/
#breadcrumb {
  background: #ffc107;
}

#breadcrumb.sticky-top {
  top: 114px;
}

#breadcrumb.row {
  justify-content: center;
}

.branchLine {
  text-align: center;
}

/* -------------------------------- content -----------------------------------------------*/
section#content {
  min-height: calc(100vh - 261px);
  padding-bottom: 1rem;
}

#mainContent {
  font-family: OldStandard, serif;
}

#mainContent ul {
  padding-left: 2rem;
}

#mainContent ul>li {
  list-style: square outside;
  margin-bottom: 0.5rem;
}

#mainContent ul.roster>li {
  list-style: none !important;
}

#mainContent ul.roster>li img {
  margin: 1rem 2rem 0 0;
  width: 100%;
}

#mainContent>.row {
  justify-content: center;
}

article.contentEditor {
  & p {
    margin-bottom: 0.5rem;
    text-indent: 12px;

    &:has(img) {
      text-indent: unset;
    }

  }

  & h2 {
    font-size: 1.6rem;
  }

  & img {
    margin: 5px;
  }
}

h3 img {
  margin-right: 1rem;
}

.questions p {
  margin-left: 2rem;
}

.oneNew {
  margin-bottom: 20px;

  & .date {
    align-self: flex-start;
    padding: 4px 10px;
  }

  & .row:has(.more) {
    justify-content: end;
  }

  & .more {
    align-self: flex-end;
    background: #b0f9c1;
    padding: 0 30px 0 20px;
    margin-bottom: 10px;
  }
}

.pagination {
  justify-content: center;
  margin-bottom: 20px;
  width: 100%;
}

.lineList {
  font-family: Maxima;
  font-size: 1.6rem;
  margin-top: 1rem;
  padding: 0px 8px;
}

a.lineList {
  font-size: 1rem;
}

.sectionLib figure {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.sectionLib a {
  color: #155724;
}

.sectionLib a:hover {
  color: #f00;
}

.sectionLib a:hover img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.sectionLib img {
  -webkit-filter: grayscale(80%);
  filter: grayscale(80%);
  -webkit-transition: 1s;
  transition: 1s;
  width: 100%;
}

.sectionLib figcaption {
  font-family: Maxima, sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
}

ul.list-img {
  display: flex;
  flex-wrap: wrap;
  padding: 0 !important;
}

ul.list-img li {
  background-color: rgba(255, 255, 255, 0.25);
  list-style: none !important;
  padding: 0 0.2rem;
}

ul.list-img li>div {
  border: 1px solid #ffc107;
  border-radius: 0.5rem;
  height: 100%;
  padding: 1rem;
}

ul.list-img .list_img {
  height: 221px;
  overflow: hidden;
  width: 100%;
}

ul.list-img .list_img>div {
  height: 100%;
  position: relative;
  width: 100%;
}

ul.list-img .list_img>div img {
  height: 100%;
  left: 50%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  width: 100%;
}

ul.list-img .list_text {
  width: 100%;
}

ul.list-img .list_text h2 {
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  text-align: center;
}

.local-art p {
  font-size: 2rem;
  padding: 1rem 0;
  text-align: center;
}

.local-art img {
  max-width: 100%;
}

/* ------------------------ custom page ----------------------------------------- */
.clubs-and-associations {
  & article.contentEditor {
    &>.row {
      align-items: center;

      & a {
        &>img {
          height: auto;
          max-width: 100%;
        }
      }
    }
  }
}

:is(.region_known_people, .lib-thank, .info-settlers, .shevchenko-live, .spisok) {
  & article.contentEditor {
    &>.row {
      justify-content: center;
    }
  }
}

.region_known_people {
  & article.contentEditor {
    &>.row {
      &>div {
        padding-bottom: 1rem;
        text-align: center;
      }

      & p {
        font-weight: bold;
        line-height: 1.2;
        margin-top: 1rem;
        text-indent: unset;
        text-transform: uppercase;
      }
    }
  }
}

:is(.lib-thank, .info-settlers) {
  & article.contentEditor {
    &>.row {
      &>div>.row {
        padding: 0.5rem 0;

        & div {
          align-items: center;
          display: flex;
        }

        & div>img {
          margin: auto;
        }
      }
    }
  }
}

.shevchenko-live {
  & article.contentEditor {
    & img {
      max-width: 100%;
    }

    & .cont {
      padding-top: 1rem;

      &>.row>div {
        display: flex;
        justify-content: center;
      }

      & .frame {
        align-items: center;
        background-image: url(/files/unalib/Image/new-arrivals/vdbio/shevchenko/ramka_1.jpg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 290px;
        width: 200px;
      }

      & a {
        text-align: center;
      }
    }
  }
}

.spisok {
  & .nav {
    & a {
      padding: 0 1rem;
    }
  }

  & h3 {
    position: relative;

    & a {
      position: absolute;
      top: -140px;
    }
  }
}

/* -------------------------------- list -----------------------------------------------*/
ul.roster li {
  margin-bottom: 1rem;

  & a {
    color: var(--danger);
    font-family: Maxima, sans-serif;
    font-size: 2rem;
    text-transform: uppercase;

    & i {
      color: #ef9e04;
      font-size: 1.2rem;
      margin-right: 1rem;
    }
  }
}

/* -------------------------------- newsList -----------------------------------------------*/
.oneNewList {
  border-bottom: 2px dashed var(--gray-light);
  margin-bottom: 40px;
  padding-bottom: 20px;

  & .row {
    align-items: center;

    & .row {
      align-items: flex-start;
    }
  }

  & .row:has(.more) {
    justify-content: end;
  }

  & img {
    height: auto;
    margin: auto;
    max-height: 210px;
    max-width: 100%;
    width: auto;
  }
}

h2.row {
  border-bottom: 1px solid;
  padding: 0;
}

/* -------------------------------- gallery -----------------------------------------------*/
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
}

.thamb {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.5rem;
}

.thamb>span>p {
  line-height: 1;
  margin: 0.5rem 0;
}

.thamb>a {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.thamb>a>img {
  height: 100%;
  left: 50%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* -------------------------------- footer -----------------------------------------------*/
#footer {
  background: url(../images/bg_footer-sep.jpg) center center no-repeat;
  background-size: cover;
  padding: 1rem 0 0.5rem;
}

.footer {
  & i {
    font-size: 2rem;
    margin-right: 10px;
  }

  & a {
    color: var(--light);
  }
}

#punkt_eu-logo,
#distance-learning-logo {
  & a {
    align-items: center;
    display: flex;
  }

  & img {
    max-height: 42px;
    margin: 0 0.5rem;
  }

  & p {
    margin: 0;
    width: 60%;
  }
}

.contact-footer p {
  color: var(--light);
  font-family: Maxima;
  font-size: 1.5rem;
  margin: 0.2rem 0;
  padding: 0 15px;
}

.contact-footer p a {
  color: var(--light) !important;
}

.row.copyright {
  align-items: end;
  margin-top: -1.5rem;
}

.copyright {
  color: var(--light);

  & p {
    margin-bottom: 0;
  }

  & #logo {
    padding: 0;

    & img {
      height: auto;
      width: 56%;
    }
  }
}

/* ----------------------------- footerMenu ------------------------------------------------- */
#footerMenu.row {
  padding-bottom: 0.5rem;
}

#footerMenu .navbar {
  padding: 0;
}

#footerMenu ul>li {
  margin-bottom: 4px;
}

#footerMenu ul>li>a {
  color: var(--light);
  font-family: Maxima;
  font-size: 1.0rem;
  letter-spacing: 0.2rem;
  line-height: 1;
  padding: 0 0.5rem;
  text-transform: uppercase;
}

#footerMenu ul>li>a:hover {
  color: var(--gray-light);
}

/* ----------------------------- calendar ------------------------------------------------- */
#calendar {
  background: var(--danger);
  display: flex;
  height: auto;
  position: fixed;
  text-align: center;
  top: 200px;
  z-index: 1021;
}

#calendar::after {
  bottom: 40%;
  color: #ff0;
  content: "календар подій";
  font-family: Maxima;
  font-size: 2rem;
  left: -23%;
  letter-spacing: 0.1rem;
  position: absolute;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#first-page #calendar {
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  opacity: 0;
}

#first-page #calendar.visible {
  opacity: 1;
}

.calendar {
  background: #ffff72;
  width: 260px;
}

#panelCalendar {
  & h2 {
    color: var(--danger);
    font-size: 2rem;
    margin: 0;
    padding: 0.2rem 0;
    text-shadow: none;
  }

  & a {
    font-weight: bold;
  }
}

select#cal_m,
select#cal_y {
  background: rgba(255, 255, 255, 0.7);
  border: none;
}

.toMove {
  color: #ff0;
  cursor: pointer;
  font-size: 2rem;
}

.toRight {
  right: -260px;
  -webkit-transition: right 1s linear;
  transition: right 1s linear;
}

.toLeft {
  right: 0;
  -webkit-transition: right 1s linear;
  transition: right 1s linear;
}

.cal-inside {
  padding: 0 1rem 1rem 0;

  & .cal-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: right;

    & .item {
      align-items: end;
      aspect-ratio: 1/1;
      display: flex;
      justify-content: end;
    }
  }
}

/* ----------------------------- e-catalog ------------------------------------------------- */
table.topBatton {
  margin: 1rem 0 2rem;
}

input.clearButton.button {
  background: var(--danger);
}

input.clearButton.button:hover {
  background: #b81b80;
}

table.form select {
  background: #fbe863;
  border: none;
  margin-bottom: 0.5rem;
  padding: 0.3rem 0.3rem;
}

select[name="lang_list"],
select[name="doctype_list"] {
  width: 100%;
}

#themeSearch h3 {
  text-align: center;
}

#eCatalog input {
  background: #fbe863;
  border: none;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.5rem;
}

select[name="step"] {
  background: #fbe863;
  border: none;
  padding: 0.3rem;
}

/* ----------------------------- vss ------------------------------------------------- */
.panel {
  line-height: 1.5rem;
}

.center_div .row {
  margin-bottom: 2rem;
}

#vss.form_container {
  background: #0f0;
  margin: -0.8rem 0 6rem;
  padding: 3rem 6rem 2rem;
  position: relative;
}

#vss.form_container:before,
#vss.form_container:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
}

#vss.form_container:before {
  right: 0;
  top: 0;
  -webkit-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: skewY(2deg);
  transform: skewY(2deg);
}

#vss.form_container:after {
  bottom: 0;
  left: 0;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: skewY(-6deg);
  transform: skewY(-6deg);
}

#vss input[type="text"] {
  border: none;
  padding: 0.5rem 1rem;
  width: 100%;
}

#vss select {
  background: #155724;
  border: none;
  color: var(--light);
  padding: 0 0.2rem 0.2rem;
}

#vss input.button {
  margin-top: 0;
}

.formVss {
  background: #23b1ab;
  margin-top: 1rem;
  padding: 4%;
  position: relative;
}

.formVss:before,
.formVss:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
}

.formVss:before {
  right: 0;
  top: 0;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: skewY(3deg);
  transform: skewY(3deg);
}

.formVss:after {
  bottom: 0;
  left: 0;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: skewY(-2deg);
  transform: skewY(-2deg);
}

input.button {
  background-color: #155724;
  color: var(--light);
  font-family: Maxima;
  font-size: 2rem;
  line-height: 1;
  margin: 1rem;

  &:hover {
    background-color: #b81b80;
  }
}

form[action="vss.htm"] {
  width: 100%;
}

textarea[name="form[que]"] {
  width: 100%;
}

/* ------------------------------ litmap -------------------------------------------------- */
.litmapa svg {
  height: auto;
  width: 100%;
}

.lrajon:hover {
  fill: #b81b80;
}

.lrajon.active {
  fill: #b81b80;
}

/* ----------------------------- site map ------------------------------------------------- */
.div_map a {
  color: #b81b80;
  display: block;
  font-size: 1.4rem;
  line-height: 1.8rem;
}

.div_map>div>a {
  color: #004085;
  font-size: 1.2rem;
  margin-left: 1rem;
}

.div_map>div>div>a {
  color: #004085;
  font-size: 1rem;
  margin-left: 2rem;
}

/* ----------------------------- modal ------------------------------------------------- */
.modal-backdrop {
  z-index: 1000;
}

.modal-body {
  text-align: center;
}

.modal-body form {
  width: 100%;
}

.modal-body img {
  margin: -15px;
  max-width: 100%;
}

.modal-header {
  padding: 5px 15px;
}

.modal-content {
  border-radius: 16px;
  background-color: #ffc107;
}

#form-login {
  & a {
    margin: 0 1rem;
  }

  & label {
    margin-left: 0.4rem;
  }

  & :is(input[type="text"], input[type="password"]) {
    border: none;
    border-radius: 4px;
    outline: 2px solid var(--light);
    padding: 4px;

    &:focus {
      outline-color: var(--info);
    }

    &:user-valid {
      outline-color: var(--success);
    }

    &:user-invalid {
      outline-color: var(--danger);
    }
  }
}

.close {
  color: #f00;
}

.ny {
  left: 2%;
  position: absolute;
  top: 0;
  width: 200px;
}

#searchModal .modal-dialog {
  margin: 20vh auto;
}

.left-modal-box {
  left: 2vw;
  position: fixed;
  top: 30vh;
  z-index: 1020;
}

.left-modal-box .modal-left {
  aspect-ratio: 1/1;
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid #002d5a;
  border-radius: 50%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 100px;
}

.left-modal-box .modal-left a {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.left-modal-box .modal-left img {
  height: auto;
  width: 80%;
}

.left-modal-box .modal-left p {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

.left-modal-box a#setCookie {
  aspect-ratio: 1/1;
  background-color: var(--danger);
  border-radius: 50%;
  color: white;
  font-size: 1rem;
  left: 80%;
  line-height: 1;
  padding: 0.3rem;
  position: absolute;
  text-align: center;
  top: 70%;
  width: 24px;
}