styles.css

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.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: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.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: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(chrome-extension://__MSG_@@extension_id__/fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.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;
}

.crodevsAPP {
  color: #222222;
  font-family: 'Montserrat', sans-serif;
  /* HTML5 display-role reset for older browsers */
}

.crodevsAPP html,
.crodevsAPP body,
.crodevsAPP div,
.crodevsAPP span,
.crodevsAPP applet,
.crodevsAPP object,
.crodevsAPP iframe,
.crodevsAPP h1,
.crodevsAPP h2,
.crodevsAPP h3,
.crodevsAPP h4,
.crodevsAPP h5,
.crodevsAPP h6,
.crodevsAPP p,
.crodevsAPP blockquote,
.crodevsAPP pre,
.crodevsAPP a,
.crodevsAPP abbr,
.crodevsAPP acronym,
.crodevsAPP address,
.crodevsAPP big,
.crodevsAPP cite,
.crodevsAPP code,
.crodevsAPP del,
.crodevsAPP dfn,
.crodevsAPP em,
.crodevsAPP img,
.crodevsAPP ins,
.crodevsAPP kbd,
.crodevsAPP q,
.crodevsAPP s,
.crodevsAPP samp,
.crodevsAPP small,
.crodevsAPP strike,
.crodevsAPP strong,
.crodevsAPP sub,
.crodevsAPP sup,
.crodevsAPP tt,
.crodevsAPP var,
.crodevsAPP b,
.crodevsAPP u,
.crodevsAPP i,
.crodevsAPP center,
.crodevsAPP dl,
.crodevsAPP dt,
.crodevsAPP dd,
.crodevsAPP ol,
.crodevsAPP ul,
.crodevsAPP li,
.crodevsAPP fieldset,
.crodevsAPP form,
.crodevsAPP label,
.crodevsAPP legend,
.crodevsAPP table,
.crodevsAPP caption,
.crodevsAPP tbody,
.crodevsAPP tfoot,
.crodevsAPP thead,
.crodevsAPP tr,
.crodevsAPP th,
.crodevsAPP td,
.crodevsAPP article,
.crodevsAPP aside,
.crodevsAPP canvas,
.crodevsAPP details,
.crodevsAPP embed,
.crodevsAPP figure,
.crodevsAPP figcaption,
.crodevsAPP footer,
.crodevsAPP header,
.crodevsAPP hgroup,
.crodevsAPP menu,
.crodevsAPP nav,
.crodevsAPP output,
.crodevsAPP ruby,
.crodevsAPP section,
.crodevsAPP summary,
.crodevsAPP time,
.crodevsAPP mark,
.crodevsAPP audio,
.crodevsAPP video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-transform: none;
  letter-spacing: 0;
}

.crodevsAPP article,
.crodevsAPP aside,
.crodevsAPP details,
.crodevsAPP figcaption,
.crodevsAPP figure,
.crodevsAPP footer,
.crodevsAPP header,
.crodevsAPP hgroup,
.crodevsAPP menu,
.crodevsAPP nav,
.crodevsAPP section {
  display: block;
}

.crodevsAPP body {
  line-height: 1;
}

.crodevsAPP ol,
.crodevsAPP ul {
  list-style: none;
}

.crodevsAPP blockquote,
.crodevsAPP q {
  quotes: none;
}

.crodevsAPP blockquote:before,
.crodevsAPP blockquote:after,
.crodevsAPP q:before,
.crodevsAPP q:after {
  content: "";
  content: none;
}

.crodevsAPP table {
  border-collapse: collapse;
  border-spacing: 0;
}

.crodevsAPP * {
  box-sizing: border-box;
}

.crodevsAPP input:not([type]):focus,
.crodevsAPP input:not([type]).focused,
.crodevsAPP input[type="email"]:focus,
.crodevsAPP input[type="email"].focused,
.crodevsAPP input[type="number"]:focus,
.crodevsAPP input[type="number"].focused,
.crodevsAPP input[type="password"]:focus,
.crodevsAPP input[type="password"].focused,
.crodevsAPP input[type="search"]:focus,
.crodevsAPP input[type="search"].focused,
.crodevsAPP input[type="text"]:focus,
.crodevsAPP input[type="text"].focused,
.crodevsAPP input[type="url"]:focus,
.crodevsAPP input[type="url"].focused,
.crodevsAPP textarea:focus,
.crodevsAPP textarea.focused {
  border: 1px solid #9084bc;
  box-shadow: 0 0 0 transparent;
  color: #2b2b2b;
}

#crodevs__sidebar {
  letter-spacing: normal;
  position: fixed;
  height: calc(100vh - 40px);
  top: 20px;
  right: 20px;
  width: 440px;
  min-width: 440px;
  max-width: calc(100vw - 40px);
  z-index: 2147483647;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
  background-color: white;
  color: rgba(0, 0, 0, 0.8);
  visibility: visible !important;
  transform: translate3d(120%, 0, 0);
  display: flex;
  flex-direction: column;
  opacity: 0;
}

#crodevs__sidebar.barOpened {
  animation: barOpened ease 0.3s;
  animation-fill-mode: forwards;
  transform: translateZ(0);
  opacity: 1;
}

#crodevs__sidebar.barClosed {
  animation: barClosed ease 0.3s;
  animation-fill-mode: forwards;
  transform: translate3d(120%, 0, 0);
  opacity: 0;
}

#crodevs__sidebar .crodevs__sidebar__wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 0;
  height: 100%;
  justify-content: flex-start;
  padding: 50px 0;
  overflow: hidden;
  border-radius: 20px;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  padding: 0 10px;
  justify-content: flex-start;
  align-items: center;
  height: 48px;
  border-bottom: 1px solid #ececec;
  width: 100%;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__header__icon {
  display: flex;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__header__icon svg {
  background: #8a57ea;
  padding: 5px;
  border-radius: 100%;
  box-sizing: border-box;
  width: 26px;
  fill: #ffffff;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__header__text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  /* color: #8a57ea; */
  margin-left: 5px;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__header__closeIcon {
  margin-left: auto;
  cursor: pointer;
  width: 25px;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__header__closeIcon svg {
  width: 100%;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__content {
  width: 100%;
  display: flex;
  flex-flow: column;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 12px;
  align-items: center;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__footer__baloon {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 6px;
  border-radius: 30px;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__footer__baloon--chat {
  background: linear-gradient(93.97deg, #8a57ea 0%, #3771e0 58.61%);
}

#crodevs__sidebar .crodevs__sidebar__wrapper__footer__baloon--chat svg {
  margin-right: 5px;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__footer .openFile {
  cursor: pointer;
}

#crodevs__sidebar .crodevs__sidebar__wrapper__footer .openFile:hover {
  text-decoration: underline;
}

#crodevs__sidebar .crodevs__intro {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 20px;
  margin-bottom: 0;
  padding-top: 0px;
  position: relative;
  overflow: hidden;
}

#crodevs__sidebar .crodevs__intro h1 {
  font-size: 28px;
  font-weight: bold;
  width: 70%;
  line-height: 1.2em;
  letter-spacing: normal;
  margin: 20px 0 30px 0;
  color: #222222;
}

#crodevs__sidebar .crodevs__intro h1.textAppear {
  animation: textAppear ease 0.3s;
  animation-fill-mode: forwards;
}

#crodevs__sidebar .crodevs__intro h1.textDisappear {
  animation: textDisappear ease 0.3s;
  animation-fill-mode: forwards;
}

#crodevs__sidebar .crodevs__intro h1 span {
  font-size: 0.6em;
  font-weight: normal;
  display: inline-flex;
}

#crodevs__sidebar .crodevs__intro__icon {
  position: absolute;
  top: -240px;
  right: -110%;
  background: #5a2c95;
  width: 700px;
  height: 400px;
  border-radius: 50%;
  padding-right: 80px;
  padding-left: 40px;
  padding-top: 80px;
  padding-bottom: 40px;
  z-index: 2;
}

#crodevs__sidebar .crodevs__intro__icon svg {
  position: absolute;
  width: 60px;
  fill: white;
  bottom: 70px;
  left: 135px;
}

#crodevs__sidebar .crodevs__search {
  width: 100%;
  position: relative;
  left: 0;
  padding: 10px 20px;
  animation: moveInverse ease 0.3s;
  animation-fill-mode: forwards;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

#crodevs__sidebar .crodevs__search h2 {
  font-weight: 600;
  font-size: 20px;
  color: #8a57ea;
  letter-spacing: 0;
  margin-bottom: 20px;
}

#crodevs__sidebar .crodevs__search__base {
  display: flex;
  justify-content: center;
  width: 100%;
}

#crodevs__sidebar .crodevs__search__back {
  transform: rotate(180deg);
  cursor: pointer;
  margin-right: 15px;
  display: none;
  justify-content: center;
  align-items: center;
}

#crodevs__sidebar .crodevs__search--onactive {
  animation: moveOnTop ease 0.3s;
  animation-fill-mode: forwards;
}

#crodevs__sidebar .crodevs__search--onactive .crodevs__search__back {
  display: flex;
}

#crodevs__sidebar .crodevs__search--onactive h2 {
  display: none;
}

#crodevs__sidebar .crodevs__search__field {
  position: relative;
  display: inline-flex;
  flex-flow: row-reverse;
  width: 100%;
  min-width: 0;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  border-radius: 30px;
  background-color: #f5eeff;
  background-image: none;
  border-width: 1px;
  border-style: solid;
  border-color: #d9d9d9;
  transition: all 0.2s;
  height: 40px;
  align-items: center;
}

#crodevs__sidebar .crodevs__search__field:hover {
  border-color: #b083f7;
  border-inline-end-width: 1px;
  z-index: 1;
}

#crodevs__sidebar .crodevs__search__field__icon {
  margin-inline-end: 4px;
  display: flex;
  position: absolute;
  z-index: 1000;
}

#crodevs__sidebar .crodevs__search__field input {
  box-sizing: border-box;
  margin: 0;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1.5714285714285714;
  list-style: none;
  position: absolute;
  display: inline-block;
  width: calc(100% - 24px);
  min-width: 0;
  background-color: #f5eeff;
  background-image: none;
  transition: all 0.2s;
  padding: 2px 5px;
  font-size: inherit;
  border: none;
  border-radius: 0;
  outline: none;
  left: 12px;
  top: 2px;
  height: 34px;
}

#crodevs__sidebar .crodevs__topic {
  width: 100%;
  padding: 0 20px 20px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  margin-top: -20px;
}

#crodevs__sidebar .crodevs__topic.textAppear {
  animation: textAppear ease 0.3s;
  animation-fill-mode: forwards;
}

#crodevs__sidebar .crodevs__topic.textDisappear {
  animation: textDisappear ease 0.3s;
  animation-fill-mode: forwards;
}

#crodevs__sidebar .crodevs__topic__card {
  display: flex;
  flex-flow: column;
  border-radius: 10px;
  line-height: 1;
  padding: 70px 20px 35px 20px;
  color: white;
  position: relative;
  font-size: 14px;
  overflow: hidden;
  color: white;
}

#crodevs__sidebar .crodevs__topic__card__links {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 20px;
  width: 100%;
  opacity: 0;
  flex-flow: column;
  height: 100%;
  justify-content: center;
  font-size: 13px;
  line-height: 1.3em;
  display: flex;
  z-index: 2;
  transition: all 0.5s;
}

#crodevs__sidebar .crodevs__topic__card__links span {
  position: relative;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  margin: 1px 0;
}

#crodevs__sidebar .crodevs__topic__card__links span:hover {
  text-decoration: underline;
}

#crodevs__sidebar .crodevs__topic__card h2 {
  font-size: 23px;
  margin: 0 0 5px 0;
  color: white;
  font-weight: 600;
}

#crodevs__sidebar .crodevs__topic__card::after {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 20px;
  height: 3px;
  width: calc(100% - 40px);
  opacity: 1;
  background-color: white;
  z-index: 1;
}

#crodevs__sidebar .crodevs__topic__card::before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  bottom: -10px;
  left: -200px;
  height: 400px;
  width: 400px;
  opacity: 0.1;
  border-radius: 50%;
  z-index: 1;
}

#crodevs__sidebar .crodevs__topic__card--clickup {
  background: #dc67e6;
}

#crodevs__sidebar .crodevs__topic__card--clickup .crodevs__topic__card__links {
  background: #dc67e6;
}

#crodevs__sidebar .crodevs__topic__card--monetate {
  background: #592d95;
}

#crodevs__sidebar .crodevs__topic__card--monetate .crodevs__topic__card__links {
  background: #592d95;
}

#crodevs__sidebar .crodevs__topic__card--naming {
  background: #43d797;
}

#crodevs__sidebar .crodevs__topic__card--naming .crodevs__topic__card__links {
  background: #43d797;
}

#crodevs__sidebar .crodevs__topic__card--code {
  background: #3a86ff;
}

#crodevs__sidebar .crodevs__topic__card--code .crodevs__topic__card__links {
  background: #3a86ff;
}

#crodevs__sidebar .crodevs__topic__card:hover .crodevs__topic__card__links {
  pointer-events: all;
  opacity: 1;
}

#crodevs__sidebar .crodevs__results {
  opacity: 0;
  display: none;
}

#crodevs__sidebar .crodevs__results.opened {
  display: flex;
  flex-flow: column;
  position: absolute;
  top: 110px;
  left: 0;
  width: 100%;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: calc(100vh - 160px);
  opacity: 1;
}

#crodevs__sidebar .crodevs__results .result-item {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  border-radius: 12px;
  border-bottom: 1px solid #f3f0f0;
  transition: all 0.2s;
  padding: 12px;
  cursor: pointer;
}

#crodevs__sidebar .crodevs__results .result-item h3 {
  font-size: 18px;
  margin: 5px 0;
  letter-spacing: normal;
  color: #5a2c95;
  font-weight: bold;
}

#crodevs__sidebar .crodevs__results .result-item p {
  font-size: 14px;
  margin: 5px 0;
  letter-spacing: normal;
}

#crodevs__sidebar .crodevs__results .result-item:hover {
  background-color: #f7f7f7;
}

#crodevs__sidebar .crodevs__results .result-item:hover h3 {
  color: #8a57ea;
}

#crodevs__sidebar .crodevs__results__content {
  opacity: 0;
  display: none;
  letter-spacing: 0;
}

#crodevs__sidebar .crodevs__results__content #topic-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #8a57ea;
  margin: 0;
  position: fixed;
  background: white;
  width: 100%;
  left: 0;
  padding: 20px;
  top: 100px;
  z-index: 1;
}

#crodevs__sidebar .crodevs__results__content.opened {
  opacity: 1;
  display: flex;
  flex-flow: column;
  position: absolute;
  top: 110px;
  left: 0;
  width: 100%;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: calc(100vh - 160px);
  padding-bottom: 70px;
  color: #2b2b2b;
  line-height: 1.5em;
  padding-top: 50px;
}

#crodevs__sidebar .crodevs__results__content.opened div {
  display: flex;
  flex-flow: column;
  font-size: 14px;
}

#crodevs__sidebar .crodevs__results__content.opened div h1 {
  font-size: 2em;
  margin: 10px 0;
  color: #222222;
}

#crodevs__sidebar .crodevs__results__content.opened div h2 {
  font-size: 1.5em;
  margin: 10px 0;
  color: #c08fff;
  font-weight: 600;
}

#crodevs__sidebar .crodevs__results__content.opened div h3 {
  font-size: 1.3em;
  margin: 10px 0;
  text-transform: none;
  color: #5a2c95;
  font-weight: 600;
  border-top: 1px solid #ededed;
  padding-top: 15px;
}

#crodevs__sidebar .crodevs__results__content.opened div h4 {
  font-size: 1.2em;
  margin: 10px 0;
}

#crodevs__sidebar .crodevs__results__content.opened div h5,
#crodevs__sidebar .crodevs__results__content.opened div h5 {
  font-size: 1em;
  margin: 10px 0;
}

#crodevs__sidebar .crodevs__results__content.opened div p {
  width: 100%;
  font-size: 14px;
  margin: 10px 0;
}

#crodevs__sidebar .crodevs__results__content.opened div p strong {
  font-weight: 600;
}

#crodevs__sidebar .crodevs__results__content.opened div p em {
  font-style: italic;
}

#crodevs__sidebar .crodevs__results__content.opened div img {
  width: 100%;
  height: auto;
}

#crodevs__sidebar .crodevs__results__content.opened div pre {
  background: #e7e7e7;
  padding: 10px;
}

#crodevs__sidebar .crodevs__results__content.opened div pre code {
  padding: 10px;
  display: block;
  font-family: monospace;
  font-size: 13px;
  border-radius: 0;
  background-color: transparent;
}

#crodevs__sidebar .crodevs__results__content::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow-y: auto;
  width: 100%;
  height: 50px;
}

#crodevs__sidebar .crodevs__results__content__header {
  position: fixed;
  top: 110px;
  left: 0;
  width: 100%;
  padding: 20px;
  display: flex !important;
  flex-flow: row !important;
  justify-content: flex-start;
  align-items: center;
}

#crodevs__sidebar .crodevs__results__content__header__iconBack {
  transform: rotate(180deg);
  cursor: pointer;
  margin-right: 10px;
}

#crodevs__sidebar .crodevs__debug {
  display: none;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

#crodevs__sidebar .crodevs__debug--active {
  position: absolute;
  background: white;
  border-radius: 30px 30px 0 0;
  box-shadow: 0px -30px 40px rgba(0, 0, 0, 0.44);
  padding-top: 20px;
  width: 100%;
  animation: showPanel ease 0.3s;
  animation-fill-mode: forwards;
}

#crodevs__sidebar .crodevs__debug--notactive {
  animation: hidePanel ease 0.2s;
  animation-fill-mode: forwards;
}

#crodevs__sidebar .crodevs__debug--visible {
  display: flex;
}

#crodevs__sidebar .crodevs__debug__selector {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  margin: 20px;
  box-shadow: 0px 0px 20px rgba(91, 43, 149, 0.2);
  width: calc(100% - 40px) !important;
  border-radius: 15px;
}

#crodevs__sidebar .crodevs__debug__selector h3 {
  font-size: 15px;
  margin: 0 10px;
  font-weight: normal;
  letter-spacing: 0;
}

#crodevs__sidebar .crodevs__debug__selector input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

#crodevs__sidebar .crodevs__debug__selector label {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 20px;
  background: #bbbbbb;
  display: block;
  border-radius: 100px;
  position: relative;
}

#crodevs__sidebar .crodevs__debug__selector label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

#crodevs__sidebar .crodevs__debug__selector input:checked + label {
  background: linear-gradient(93.97deg, #c96bd1 0%, #3e1f66 90.61%);
}

#crodevs__sidebar .crodevs__debug__selector input:checked + label:after {
  left: calc(100% - 3px);
  transform: translateX(-100%);
}

#crodevs__sidebar .crodevs__debug__selector label:active:after {
  width: 30px;
}

#crodevs__sidebar .crodevs__debug__list {
  display: none;
  flex-flow: column;
  padding: 20px;
  width: 100%;
  opacity: 0;
}

#crodevs__sidebar .crodevs__debug__list.debugVisible {
  opacity: 1;
  display: flex;
  animation: showDebug ease 0.3s;
  animation-fill-mode: forwards;
}

#crodevs__sidebar .crodevs__debug__list__error {
  display: inline-block;
  width: 100%;
  font-size: 13px;
  text-align: center;
  line-height: 1.5em;
  color: black;
  background: #f8f8f8;
  padding: 15px;
}

#crodevs__sidebar .crodevs__debug__list__error strong {
  font-size: 16px;
}

#crodevs__sidebar .crodevs__debug__list__error h3 {
  margin: 0 0 10px 0;
  color: #c83430;
  font-size: 28px;
}

#crodevs__sidebar .crodevs__debug__list__row {
  font-size: 12px;
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
}

#crodevs__sidebar .crodevs__debug__list__row:nth-child(even) {
  background-color: #f9f9f9;
}

#crodevs__sidebar .crodevs__debug__list__row--head {
  font-weight: 600;
  font-size: 13px;
  background-color: #ededed;
}

#crodevs__sidebar .crodevs__debug__list__row--content {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  max-height: 30vh;
  overflow-y: scroll;
}

#crodevs__sidebar .crodevs__debug__list__row--content__container {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}

#crodevs__sidebar .crodevs__debug__list__row:not("crodevs__debug__list__row--head"):hover {
  background-color: red;
}

#crodevs__sidebar .crodevs__debug__list__col {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 5px 10px;
}

#crodevs__sidebar .crodevs__debug__list__col--name {
  width: 68%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

#crodevs__sidebar .crodevs__debug__list__col--name strong {
  margin-right: 5px;
}

#crodevs__sidebar .crodevs__debug__list__col--type {
  width: 25%;
  align-items: flex-end;
  justify-content: flex-start;
}

#crodevs__sidebar .crodevs__debug__list__col--link {
  width: 15%;
  align-items: center;
}

#crodevs__sidebar .crodevs__debug__list__col--link a {
  text-decoration: underline;
}

.crodevs__icon {
  letter-spacing: normal;
  position: fixed;
  right: 0;
  top: 50vh;
  z-index: 2147483647;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  visibility: visible !important;
  pointer-events: none;
  transform: translate3d(100%, 0, 0);
  opacity: 0;
}

.crodevs__icon__button {
  position: relative;
  padding: 10px 10px 10px 14px !important;
  background-color: #f8f8f8;
  border-radius: 20px 0 0 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #ececee;
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.14);
  pointer-events: all;
  cursor: pointer;
  transition: all 0.1s ease 0.1s;
}

.crodevs__icon__button svg {
  width: 25px;
  transition: all 0.3s ease 0.2s;
}

.crodevs__icon__button:hover {
  background-image: linear-gradient(93.97deg, #c96bd1 0%, #3e1f66 90.61%);
  border-color: transparent;
}

.crodevs__icon__button:hover svg {
  margin: 0 5px;
  fill: white;
}

.crodevs__icon.showBar {
  transform: translateZ(0);
  opacity: 1 !important;
}

@keyframes moveOnTop {
  to {
    position: absolute;
    top: 48px;
    background: transparent;
    transform: translateY(0);
    width: 80%;
  }
}

@keyframes moveInverse {
  to {
    position: relative;
    transform: translateY(-50%);
    width: 100%;
    background: transparent;
  }
}

@keyframes barOpened {
  from {
    transform: translate3d(120%, 0, 0);
    opacity: 0;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes barClosed {
  from {
    transform: translateZ(0);
    opacity: 1;
  }
  to {
    transform: translate3d(120%, 0, 0);
    opacity: 0;
  }
}

@keyframes showPanel {
  from {
    top: 100%;
  }
  to {
    top: 40%;
  }
}

@keyframes hidePanel {
  0% {
    top: 40%;
    position: absolute;
    opacity: 0.5;
  }
  50% {
    top: auto;
    position: relative;
    opacity: 0;
  }
  100% {
    position: relative;
    top: auto;
    opacity: 1;
  }
}

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

@keyframes textAppear {
  from {
    opacity: 0;
    transform: translateY(-100vh);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes textDisappear {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100vh);
  }
}