@font-face {
  font-family: 'Mazzard-Medium';
  src: url('/fonts/Mazzard-Medium.otf');
  font-weight: 500;
}
@font-face {
  font-family: 'Mazzard-Regular';
  src: url('/fonts/Mazzard-Regular.otf');
  font-weight: 400;
}
@font-face {
  font-family: 'Mazzard-Light';
  src: url('/fonts/Mazzard-Light.otf');
  font-weight: 400;
}
html,
body { 
  scroll-behavior: smooth;
}
body {
  margin: 0 auto;
}
h1 {
  font-family: 'Mazzard-Medium';
  font-size: 40px;
  font-style: normal;
}
h2 {
  font-family: 'Mazzard-Regular';
  font-size: 24px;
  font-style: normal;
}
h3 {
  font-family: 'Mazzard-Medium';
  font-size: 18px;
  font-style: normal;
}
h4 {
  font-family: 'Mazzard-Medium';
  font-size: 16px;
  font-style: normal;
}
h5 {
  font-family: 'Mazzard-Medium';
  font-size: 14px;
  font-style: normal;
}
h6 {
  font-family: 'Mazzard-Medium';
  font-size: 12px;
  font-style: normal;
}
p,
li {
  font-family: 'Mazzard-Regular';
  font-size: 16px;
  font-style: normal;
}
.middle_content_guides strong,
.middle_content_sdk strong {
  font-family: 'Mazzard-Medium';
  font-size: 16px;
  font-style: normal;
}
blockquote span strong {
  font-family: 'Mazzard-Medium';
  font-size: 24px;
  font-style: normal;
}
blockquote span {
  font-family: 'Mazzard-Regular';
  font-size: 18px;
  font-style: normal;
}
.text_style_mazzard_span {
  font-family: 'Mazzard-Regular', sans-serif;
  font-size: 14px;
}
.text_style_inter {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.text_style_black {
  color: #141414;
}
.bg_primary {
  background: #4359F3;
}
.mobile_side_nav {
  transition: ease-out .3s;
  right: -100%;
}
.mobile_side_nav.active {
  transition: ease-in .3s;
  right: 0;
}
.oc_burger {
  width: 45px;
  height: 45px;
  background-color: #f4f6fb;
  display: none;
}
.burger_line_long {
  width: 20px;
  height: 3px;
  background-color: #141414;
  transition: ease-out .2s;
}
.burger_line_short {
  width: 11px;
  height: 3px;
  background-color: #141414;
  transition: ease-out .2s;
}
.burger_bottom_line {
  bottom: 15px;
  left: 14px;
}
.burger_top_line {
  top: 15px;
  right: 14px;
}
.burger_line_long.active {
  transform: rotate(45deg);
  transition: ease-in .2s;
}
.burger_top_line.active {
  transform: rotate(-45deg);
  transition: ease-in .2s;
  top: 18px;
}
.burger_bottom_line.active {
  transform: rotate(-45deg);
  transition: ease-in .2s;
  bottom: 18px;
}
.active_button {
  border: 1.5px solid #D2DEFF;
  background: #F3F7FF;
}
.side_menu {
  background-color: #F4F6FB;
  width: 380px;
}
.oc_app:before,
.oc_app:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 15px 0 0 0;
  box-shadow: -10px 0 0 0 white;
}
.oc_app:after {
  right: -19px;
  top: -1px;
}
.oc_app:before {
  left: 0;
  top: 31px;
}
.active_side_menu {
  background-color: white;
  padding: .5rem;
  padding-left: 1rem;
  border-radius: 25px;
}
.active_side_menu.active_item {
  background-color: #F6FFFE;
}
.side_menu_item:hover {
  background-color: #fff;
}
.select_item {
  color: #828282;
}
.select_item:hover,
.select_item_active {
  background-color: #4359F3;
  color: white;
}
.active_button {
  border: 1.5px  solid #D2DEFF;
  background: #F3F7FF;
  pointer-events: none;
}
.transition { 
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -moz-transition: all .5s; 
  transition: all .5s;
}
.collapse-dn {
  max-height: 0rem;
  opacity: 0;
  transition: .2s ease-in;
  overflow: hidden;
}
.collapse-dn.pa3 {
  padding: 0;
}
.collapse-dn.mt3 {
  margin-top: 0;
}
.collapse-auto {
  opacity: 1;
  transition: .5s ease-in;
}
.table_td_mw {
  max-width: 8rem;
  min-width: 8rem;
  margin-right: 3rem !important;
}
.copy-bg {
  border: 2px solid transparent;
  border-radius: 10px;
}
.copy-bg > div {
  display: none;
}
.copy-bg-active:hover {
  background-color: rgba(67, 89, 243, 0.1);
  border: 2px solid rgba(67, 89, 243, 0.5);
  border-radius: 10px;
}
.copy-bg-active:hover > div {
  display: flex;
  align-items: center;
}
.collapse-radius {
  border-radius: 1rem;
  transition: .2s ease-in;
}
.middle_content,
.middle_content_guides {
  width: 70%;
  margin: 0 4rem;
}
.middle_content_sdk pre {
  overflow-x: auto;
}
.guides_middle_section table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  border: 1px solid #eeeeee;
  color: #141414;
  font-size: 16px;
  border-collapse: collapse;
  line-height: 1.6;
}
.guides_middle_section thead {
  background: #FBFBFB;
  margin-bottom: 0;
}
.guides_middle_section tbody {
  background: #fff;
  margin-bottom: 0;
}
.guides_middle_section thead th,
.guides_middle_section tbody tr td:first-child {
  font-family: 'Mazzard-Medium';
}
.guides_middle_section tbody tr td {
  font-family: 'Mazzard-Regular';
}
.guides_middle_section thead tr,
.guides_middle_section tr:not(:last-child) {
  border-bottom: 1px solid #eeeeee;
}
.guides_middle_section table th {
  border-bottom: 2px solid #dee2e6;
  text-align: left;
}
.guides_middle_section table tr th:empty,
.guides_middle_section table tr td:empty {
  display: none;
}
.guides_middle_section table tbody tr span {
  word-break: normal;
}
.guides_middle_section table td,
.guides_middle_section table th {
  padding: 0.75rem;
  vertical-align: top;
  margin-bottom: 0;
  border-top: 1px solid #dee2e6;
}
.oc_info:before,
.oc_info:after {
  content: "";
  position: absolute;
  box-shadow: -5px 0px 0px 0px white;
  width: 13px;
}
.oc_info:after {
  height: 6px;
  border-radius: 17px 0 0 0;
  top: 9px;
  right: -12.7px;
}
.oc_info:before {
  height: 10px;
  border-radius: 0 0px 0px 10px;
  bottom: -12px;
  left: 6px;
  transform: rotate(70deg);
}
.toc_content {
  display: flex;
  flex-direction: column;
  max-width: 27rem;
  width: 30%;
}
.toc_content nav ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
.toc_content nav ul li a{
  color: #141414;
  text-decoration: none;
  font-size: 16px;
}
.toc_content nav ul li a {
  display: block;
  padding: 0.5rem;
  padding-left: 1rem;
  margin: 1px 0 0 -1rem;
  font-family: 'Mazzard-Regular';
}
.toc_list_element a:hover,
.toc_list_element.active_toc a {
  background-color: #F8F8F8;
  border-radius: 25px;
  font-size: 16px;
}
.toc_content nav > ul > li > a {
  display: block;
  margin-bottom: 20px;
  font-size: 16px;
  font-family: 'Mazzard-Medium';
}
.app_select,
.version_select {
  width: 200px;
}
.app_list,
.version_list {
  width: 240px;
  left: -10px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  top: 50px;
}
.table_td_mw a {
  color: #F30170;
}
.burger_menu_item.active_side_menu {
  background-color: #F8F8F8;
}
.desc_break_word .text_style_mazzard_span {
  word-break: break-word;
}
.desc_break_word .text_style_mazzard_span strong {
  font-family: 'Mazzard-Medium', sans-serif;
  font-weight: 500;
}
@media only screen and (min-width:30rem) {
  body{width:100%}
}
@media only screen and (min-width:112rem) {
  body{width:108rem}
}
@media only screen and (max-width: 1550px) {
  .middle_content {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }
  .middle_and_toc_api {
    flex-direction: column;
    padding: 0 0 0 4rem;
  }
  .toc_content_api {
    max-width: 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 1280px) {
  .toc_content_guides {
    display: none;
  }
  .middle_content_guides {
    width: 100%;
  }
  .middle_content_sdk {
    width: 90%;
  }
}
@media only screen and (max-width: 959px) {
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 16px;
  }
  h4 {
    font-size: 14px;
  }
  h5 {
    font-size: 12px;
  }
  h6 {
    font-size: 10px;
  }
  p,
  li {
    font-size: 14px;
  }
  .text_style_mazzard_span {
    font-size: 14px !important;
  }
  .middle_and_toc {
    padding: 0;
  }
  .middle_content_guides {
    margin: 0;
  }
  .middle_content_sdk {
    width: 100%;
  }
  .app_select,
  .version_select {
    width: 100%;
  }
  .app_list,
  .version_list {
    width: auto;
    left: 0;
  }
  .oc_burger {
    display: flex;
  }
  .nav_button a {
    font-size: 14px;
  }
}
@media only screen and (max-width: 500px) {
  .table_td_mw {
    max-width: 6rem;
    min-width: 6rem;
  }
}

.copyable-code {
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 5px; /* Reduced padding */
  background-color: #f9f9f9;
}

.copyable-code pre {
  margin: 0;
  padding: 5px;
  background: none;
  border: none;
}

.copy-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #4359F3;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 0.8rem;
  transition: background 0.3s;
}

.copy-btn:hover {
  background: #3646C3;
}

.copy-btn:active {
  background: #2E3CA3;
}


img {
  border: 2px solid #1a73e8;
  padding: 5px;
  border-radius: 4px;
  box-sizing: border-box;
}


.toc_content nav ul li a {
  font-size: 16px;
}


.toc_list_element a {
  font-size: 16px;
}


.toc_content nav > ul > li > a {
  font-size: 16px; 
}