* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
}

html {
  --bg-mainmenu: rgba(246, 247, 248);
  --bg01: rgba(218, 222, 225, .1);
  --bg02: rgba(218, 222, 225, .2);
  --bg03: rgba(218, 222, 225, .3);
  --bg04: rgba(218, 222, 225, .4);
  --bg05: rgba(218, 222, 225, .5);
  --bg06: rgba(218, 222, 225, .6);
  --bg07: rgba(218, 222, 225, .7);
  --bg08: rgba(218, 222, 225, .8);
  --bg09: rgba(218, 222, 225, .9);
  --bg10: rgba(218, 222, 225, 1);

  --bg-list: rgb(246, 247, 247);
  --bg-shade-1: rgba(218, 222, 225, .1);
  --bg-alert: rgb(246, 247, 247);
  --bg-save-green: rgba(90, 157, 40, .15);
  --bg-save-yellow: rgb(250, 231, 122, .5);
  --bg-save-red: rgba(210, 100, 0, .3);
  --bg-button-blue: rgb(229, 235, 238);
  --bg-button-red: rgb(246, 199, 184);

  --text-medium: rgb(136, 136, 136);
  --text-soft: rgb(100, 100, 100);
  --text-primary: rgb(51, 51, 51);

  --input-text: rgb(58, 58, 58);
  --input-border: rgb(181, 197, 203);
  --input-bg: rgb(249, 247, 250);
  --input-bg-readonly: rgb(225,225,225);

  --svg-bluedark: rgba(108, 136, 153, .4);
  --svg-stroke: rgba(108, 136, 153, 1);
}

body {
  background: linear-gradient(145deg, #f1f5f9 0%, #e6edf4 100%);
  font-family: Ubuntu, sans-serif;
  min-width: 100%;
  min-height: 100vh;
  margin: 0;
}

footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 2rem;
  margin-top: 2rem;
}

/*Header*/
header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  background: linear-gradient(160deg, rgba(176, 192, 201, 1) 0%, rgba(176, 192, 221, 1) 50%, rgba(230, 177, 186, 1) 100%);
  background-size: 300% 300%;
  animation: animatebg 20s ease infinite;
  box-shadow: 0 1px 5px 0px rgb(0 0 0 / 50%);
  user-select: none;
  text-align: right;
  z-index: 1500;
}

#site-logo {
  display: flex;
  margin-left: 5px;
}

#site-nav {
  display: flex;
  margin: 10px 20px;
}

#site-logo svg {
  height: 55px;
  max-width: 100%;
  transition: .5s;
}

#site-nav svg {
  height: 30px;
}

/* Menubar*/
#side-bar {
  display: flex;
  flex-direction: column;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 3px solid rgba(218, 222, 225, 1);
  border-width: 0 0 0 1px;
  color: white;
  position: fixed;
  top: 0;
  bottom: 0;
  right: -200px;
  width: 200px;
  margin: 0 auto;
  background: rgba(99, 128, 130, 1);
  background: linear-gradient(to right, #6c8b9c 0%, #637f91 77.5%, #63808f 100%);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: .5s;
  cursor: pointer;
  user-select: none;
  z-index: 1100;
}
#side-bar.bar-on {
  right: 0;
}
.side-user {
  margin-top: auto;
  padding: 0 0 5px;
}
.side-head {
  padding: 10px 0 10px 12px;
  border: 1px solid rgba(218, 222, 225, 1);
  border-width: 1px 0 0;
  text-transform: uppercase;
  color: rgba(255, 225, 135, 1);
}
.side-row {
  padding: 10px 0 10px 25px;
  border: 1px solid rgba(218, 222, 225, 1);
  border-width: 1px 0 0;
  color: white;
}

/*Input data*/
textarea, input, select {
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid gainsboro;
  border-radius: 3px;
  color: var(--input-text);
  font-family: inherit;
  margin: 0;
  padding: 5px 4px;
  outline: none;
}

textarea {
  resize: vertical;
}

/*Message*/
#msg-wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  min-width: 300px;
  max-width: 460px;
  /*max-height: calc(100vh - 100px);*/
  padding: 5px 15px 10px;
  color: var(--text-soft);
  background: var(--bg-alert) !important;
  border-radius: 5px;
  overflow: auto;
  z-index: 99999;
}

.msg-title {
  color: #E48977;
  font-size: 28px;
  text-transform: none;
  position: relative;
  margin: 5px 0 10px;
  padding: 0;
  line-height: 1;
  text-align: center;
  display: block;
}

.msg-text {
  font-size: 15px;
  padding: 0 10px;
  text-align: justify;
  line-height: 1.3;
  color: var(--text-soft);
}

.msg-text > div + div {
  margin: 5px 0;
}

#msg-wrapper ul {
  margin: 0 10px;
  list-style-type: disc;
}

#msg-wrapper li {
  margin: 5px 0;
}

.msg-buttons {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  margin: 15px 10px 5px;
}

.msg-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  padding: 8px 4px;
  font-size: 16px;
  text-align: center;
  color: var(--text-primary);
  background: var(--bg-button-blue);
  border: 1px solid #B5C5CB;
  border-radius: 6px;
  line-height: 1.1;
  cursor: pointer;
}

.msg-alert .msg-button {
  max-width: 120px;
}

.msg-green {
  background: var(--bg-save-green);
  border: 1px solid var(--bg-save-green);
}

.msg-yellow {
  background: var(--bg-save-yellow);
  border: 1px solid var(--bg-save-yellow);
}

.msg-red {
  /* background: rgba(228,137,120,.5); */
  background: var(--bg-button-red);
  border: 1px solid var(--bg-save-red);
}

#msg-overlay {
  background-color: black;
  background-color: rgba(0, 0, 0, .4);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
}

.hide {
  display: none !important;
}

.hidden {
  visibility: hidden;
}

/* cyrillic */
@font-face {
  font-family: Ubuntu;
  font-style: normal;
  font-weight: 400;
  src: local(Ubuntu), local(Ubuntu-Regular),
  url('https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKew72j00.woff2') format('woff2'),
  url('../fonts/Ubuntu-Regular.woff2') format('woff2'),
  url('../fonts/Ubuntu-Regular.woff') format('woff');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/unbounded/v6/Yq6F-LOTXCb04q32xlpat-6uR42XTqtG6xjx447Ngc6L.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/unbounded/v6/Yq6F-LOTXCb04q32xlpat-6uR42XTqtG6xjx44TNgc6L.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/unbounded/v6/Yq6F-LOTXCb04q32xlpat-6uR42XTqtG6xjx44rNgQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/comfortaa/v47/1Ptsg8LJRfWJmhDAuUs4QIFqPfE.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/comfortaa/v47/1Ptsg8LJRfWJmhDAuUs4SYFqPfE.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/comfortaa/v47/1Ptsg8LJRfWJmhDAuUs4Q4FqPfE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/comfortaa/v47/1Ptsg8LJRfWJmhDAuUs4TYFq.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}