@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local('Inter Regular'), local('Inter-Regular'),
    url(./static/fonts/Inter-Regular.woff2) format('woff2'),
    url(./static/fonts/Inter-Regular.woff) format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: local('Inter Medium'), local('Inter-Medium'),
    url(./static/fonts/Inter-Medium.woff2) format('woff2'),
    url(./static/fonts/Inter-Medium.woff) format('woff');
}

:root {
  --custom-first: 186, 64, 117; /* BA4075 */
  --graphite: 66, 69, 77; /* 42454D */
  --color-gray: 147, 151, 161; /* 9397A1 */
  --optional: 95, 140, 229; /* 5F8CE5 */
  --light-grey: 231, 234, 237; /* E7EAED */
  --grey-plus: 190, 192, 199; /* #BEC0C7 */
  --color-light: 231, 234, 237; /* #E7EAED */
}

*,
::after,
::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #797c84 rgb(243, 244, 245);
  min-width: 0; /* FIREFOX FLEX HACK */
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Inter', sans-serif;
  color: rgb(var(--graphite));
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

a {
  color: rgb(var(--custom-first));
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: rgb(var(--custom-first));
  text-decoration: underline;
}

input[type='checkbox'] {
  display: none;
}

:focus {
  outline: none;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar,
::-webkit-scrollbar-track {
  background: rgb(243, 244, 245);
  width: 5px;
  margin: 0 3px;
}

::-webkit-scrollbar-thumb {
  background: #797c84;
  border-radius: 5px;
}

.hidden {
  display: none;
}

.clear::after {
  content: '';
  display: table;
  clear: both;
}

svg {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.section {
  width: 510px;
  margin: 88px 0 0 84px;
  font-size: 13px;
  opacity: 0;
}

.section_show {
  opacity: 1;
}

.logo {
  width: 130px;
  height: 45px;
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: contain;
  margin-bottom: 52px;
}

h1 {
  font-size: 17px;
  line-height: 28px;
  margin-bottom: 24px;
  font-weight: 400;
}

.info {
  margin-bottom: 16px;
  white-space: pre-line;
}

.info__row {
  margin-bottom: 8px;
}

.checkbox {
  display: inline-block;
  padding-left: 32px;
  margin-bottom: 20px;
  position: relative;
  cursor: pointer;
}

.checkbox::before {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 4px;
  border: 1px solid rgb(var(--color-light));
}

.checkbox:hover::before {
  border-color: rgb(var(--custom-first));
}

[type='checkbox']:checked + .checkbox__icon {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px;
  background: rgb(var(--custom-first))
    url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjQxMDcgOS42OTQ3NEM2LjQ5MDI3IDkuNzU4NCA2LjYwNSA5Ljc1MjA0IDYuNjc3MDYgOS42Nzk5OEwxMi42MzQ3IDMuNzIyM0MxMi43OTEgMy41NjYwOSAxMy4wNDQyIDMuNTY2MDkgMTMuMjAwNCAzLjcyMjNMMTQuMDQ5IDQuNTcwODJDMTQuMjA1MiA0LjcyNzAzIDE0LjIwNTIgNC45ODAzIDE0LjA0OSA1LjEzNjUxTDYuOTUyMDcgMTIuMjMzNEM2LjgwNzk0IDEyLjM3NzUgNi41Nzg1IDEyLjM5MDIgNi40MTkzNSAxMi4yNjI5TDIuMzEyMzUgOC45NzczMUMyLjEzOTg0IDguODM5MyAyLjExMTg3IDguNTg3NTkgMi4yNDk4OCA4LjQxNTA4TDIuOTk5NTEgNy40NzgwNEMzLjEzNzUyIDcuMzA1NTMgMy4zODkyMyA3LjI3NzU3IDMuNTYxNzQgNy40MTU1N0w2LjQxMDcgOS42OTQ3NFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=')
    no-repeat 50% 50%;
  border-radius: 4px;
}

.button {
  display: inline-block;
  padding: 12px 20px;
  background-color: rgb(var(--custom-first));
  border-radius: 4px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 300ms ease-in-out;
}

.button:hover {
  opacity: 0.8;
}

.button[data-disabled='true'] {
  background-color: rgb(var(--grey-plus));
  color: #fff;
  cursor: default;
}

a.button:hover {
  color: #ffffff;
  text-decoration: none;
}

.step-label {
  color: rgb(var(--color-gray));
  margin-bottom: 8px;
}

.progress {
  height: 4px;
  background-color: #f3f4f5;
  border-radius: 1px;
  margin-bottom: 20px;
}

.progress_success {
  background-color: #61af53;
}

.progress__value {
  display: block;
  height: 100%;
  border-radius: 1px;
  background-color: rgb(var(--custom-first));
}

.step-info {
  white-space: pre-line;
  margin-bottom: 16px;
}

.loading-label {
  color: rgb(var(--color-gray));
}

.loading-icon {
  display: flex;
  justify-content: space-between;
  width: 30px;
  padding-top: 15px;
}

.loading-icon > span {
  width: 6px;
  height: 6px;
  background-color: rgb(var(--custom-first));
  border-radius: 50%;
  animation: 1s 0.1s infinite loadingCerts;
  opacity: 0;
}

@keyframes loadingCerts {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #2f3137;
  opacity: 0.12;
}

.dialog-error {
  width: 334px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
}

.dialog-error__header {
  padding: 32px 28px 20px 68px;
  color: #e75671;
  background: url(./static/images/error.svg) no-repeat 28px 30px;
  border-bottom: 1px solid rgb(var(--color-light));
}

.dialog-error__header-close {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 12px;
  right: 12px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYuNTksOEwyLjU4LDMuOTljLS4xNi0uMTYtLjE2LS40MSwwLS41N2wuODUtLjg1Yy4xNi0uMTYsLjQxLS4xNiwuNTcsMGw0LjAxLDQuMDFMMTIuMDEsMi41OGMuMTYtLjE2LC40MS0uMTYsLjU3LDBsLjg1LC44NWMuMTYsLjE2LC4xNiwuNDEsMCwuNTdsLTQuMDEsNC4wMSw0LjAxLDQuMDFjLjE2LC4xNiwuMTYsLjQxLDAsLjU3bC0uODUsLjg1Yy0uMTYsLjE2LS40MSwuMTYtLjU3LDBsLTQuMDEtNC4wMUwzLjk5LDEzLjQyYy0uMTYsLjE2LS40MSwuMTYtLjU3LDBsLS44NS0uODVjLS4xNi0uMTYtLjE2LS40MSwwLS41N2w0LjAxLTQuMDFaIiBmaWxsPSIjMmYzMTM3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii44OCIvPjwvc3ZnPg==');
  cursor: pointer;
}

.dialog-error__content {
  padding: 12px 28px 24px;
}

.dialog-error__footer {
  padding: 0 28px 28px;
}

/* REGISTRATION*/

.cert-info {
  display: inline-block;
  padding: 8px 12px 8px 44px;
  background-color: rgba(var(--optional), 0.12);
  border-radius: 4px;
  margin-bottom: 16px;
  color: rgb(var(--optional));
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZyBpZD0iYiI+PHBhdGggZD0iTTE1LDhjMCwzLjg3LTMuMTMsNy03LDdTMSwxMS44NywxLDgsNC4xMywxLDgsMXM3LDMuMTMsNyw3Wm0tNy0yYy41NSwwLDEtLjQ1LDEtMXMtLjQ1LTEtMS0xLTEsLjQ1LTEsMSwuNDUsMSwxLDFabS0xLDUuNmMwLC4yMiwuMTgsLjQsLjQsLjRoMS4yYy4yMiwwLC40LS4xOCwuNC0uNFY3LjRjMC0uMjItLjE4LS40LS40LS40aC0uNmwtMSwxdjMuNloiIGZpbGw9IiM1RjhDRTUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4NCg==');
  background-position: 14px 10px;
  background-repeat: no-repeat;
}

.cert-item {
  margin-bottom: 16px;
}

.cert-list .cert-item {
  position: relative;
  padding-left: 32px;
  cursor: pointer;
}

.cert-list .cert-item::before {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgb(var(--light-grey));
  border-radius: 50%;
}

.cert-list .cert-item:hover::before {
  border-color: rgb(var(--custom-first));
}

.cert-list .cert-item.active::before {
  border: 6px solid rgb(var(--custom-first));
}

.cert-item.disabled {
  color: rgb(var(--color-gray));
  cursor: default;
}

.cert-list .cert-item.disabled::before {
  border-color: rgb(var(--color-light));
  background-color: rgb(var(--color-light));
}