*{font-family:'Roboto', sans-serif; box-sizing: border-box;}
    html{margin:0; padding:0; height:100%; min-height:100%; }
    body{margin:0; padding:0; height:100%; min-height:100%; background-color: var(--page-background-color) !important;}
    pre{overflow:visible !important;}
    p{color:var(--color-p);}
    a{color:var(--color-a) !important;}

    .hidden{height:0 !important; overflow:hidden; opacity:0 !important; border:0 !important; padding-top:0 !important; padding-bottom:0 !important;}

    .mt0{margin-top:0 !important;}
    .mt5{margin-top:5px !important;}
    .mt10{margin-top:10px !important;}
    .mt20{margin-top:20px !important;}
    .mt30{margin-top:30px !important;}
    .mt40{margin-top:40px !important;}
    .mt50{margin-top:50px !important;}
    .mt60{margin-top:60px !important;}
    .mt70{margin-top:70px !important;}

    .ml0{margin-left:0 !important;}
    .ml5{margin-left:5px !important;}
    .ml10{margin-left:10px !important;}
    .ml20{margin-left:20px !important;}
    .ml30{margin-left:30px !important;}
    .ml40{margin-left:40px !important;}
    .ml50{margin-left:50px !important;}
    .ml60{margin-left:60px !important;}
    .ml70{margin-left:70px !important;}
    .ml80{margin-left:80px !important;}
    .ml90{margin-left:90px !important;}
    .ml100{margin-left:100px !important;}

    .ptb5{padding-top:5px !important; padding-bottom:5px !important;}
    .ptb10{padding-top:10px !important; padding-bottom:10px !important;}
    .ptb20{padding-top:20px !important; padding-bottom:20px !important;}
    .ptb30{padding-top:30px !important; padding-bottom:30px !important;}
    .ptb40{padding-top:40px !important; padding-bottom:40px !important;}
    .ptb50{padding-top:50px !important; padding-bottom:50px !important;}

    .pb5{padding-bottom:5px !important;}
    
    .wp-5{width:5%;}
    .wp-6{width:6%;}
    .wp-7{width:7%;}
    .wp-8{width:8%;}
    .wp-9{width:9%;}
    .wp-10{width:10%;}
    .wp-11{width:11%;}
    .wp-12{width:12%;}
    .wp-13{width:13%;}
    .wp-14{width:14%;}
    .wp-15{width:15%;}
    .wp-20{width:20%;}
    .wp-25{width:25%;}
    .wp-30{width:30%;}
    .wp-35{width:35%;}
    .wp-40{width:40%;}
    .wp-44{width:44%;}
    .wp-50{width:50%;}
    .wp-60{width:60%;}
    .wp-70{width:70%;}
    .wp-80{width:80%;}
    .wp-90{width:90%;}
    .wp-100{width:100%;}
    
    .red{color:#ed1441 !important;}
    
    /* Полоса прокрутки */
    ::-webkit-scrollbar { width: 12px; /* ширина вертикальной полосы */
        height: 12px; /* высота горизонтальной полосы */
    }
    
    /* Трек полосы прокрутки */
    ::-webkit-scrollbar-track {
        background: var(--scrollbar-track-background); /* цвет фона трека */
    }
    
    /* Ползунок полосы прокрутки */
    ::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb-background); /* цвет ползунка */
        border-radius: 10px; /* скругленные углы */
        border: 3px solid var(--scrollbar-thumb-border); /* отступы внутри трека */
    }
    
    /* Ползунок при наведении */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover-background); /* цвет ползунка при наведении */
    }
    
    header{ position: absolute; top:0; left:0; display:flex !important; width:100%; height:72px; padding:0 35px 0 0; background:var(--header-background-color); flex-direction:row; justify-content: flex-start; align-items: center; border-bottom: 1px solid var(--header-border-color); z-index: 10;}
 
        header .burger-menu-but--path{ display:none; flex:0 0 70px; height:auto; justify-content: flex-start; align-items: center; }
            .burger-menu-but{ display:flex; flex-direction: column; flex: 0 0 40px; height:40px; margin:0 0 0 15px; padding:5px 0 0 0; border:2px solid var(--menu-burger-border-color); border-radius: 3px; transition: 0.5s; }
                .burger-menu-but--line{ width:60%; height:2px; background:var(--menu-burger-line-color); margin:5px 0 0 20%; }
            .burger-menu-but--path.act .burger-menu-but{ border:2px solid var(--color-primary-background); background: var(--color-primary-background); }
                .burger-menu-but--path.act .burger-menu-but--line{ background: var(--color-primary-revers); }

        header .logo-path{ position: relative; display:flex; flex:1 1 100%; height:auto; padding:0 30px; justify-content: flex-start; align-items: center;}
            header .logo{ flex:0 0 auto; height:auto;}
                header .logo img{ height: 40px; }
            header h1{ flex:0 0 auto; font-size:18px; font-weight:normal; color:var(--color-primary-revers); text-transform: uppercase; margin:4px 0 0 20px; padding:0; }

        header .lang-path{ display:flex; flex:0 0 150px; height:auto; padding:0 20px; flex-direction: row; align-items: center;}
            .lang-el{ display:flex; flex: 0 0 50px; margin:0 5px; height:100%; }
                .lang-el input{display:none;}
                .lang-el label{display:flex; flex:0 0 100%; height:30px; align-items: center; justify-content:center; margin:0; padding:0; border:1px solid var(--ui-background-color); border-radius: 4px; background:var(--ui-background-color); cursor:pointer; font-size: 12px; color:var(--ui-text-color); transition: background-color 300ms, color 300ms;}
                .lang-el input:checked + label{ background:var(--ui-background-act-color); border:1px solid var(--ui-background-act-color); color:var(--ui-text-act-color); }

    #main{ position:relative; display:block; width:100%; height:100%; overflow:hidden; background:var(--page-background-color);}

        #main .menu{ position:absolute; top:0; left:0; display:flex; width:310px; flex-direction:column; padding:0 0 40px 0; background-color:var(--menu-background-color); border:1px solid var(--menu-border-color); border-width:0 1px 0 0; overflow: auto; padding: 75px 0 0 0; height: 100%;}
            #main .menu-path{ position:absolute; top:80px; width:100%; height:auto; padding:0 0 30px 0; }
                #main .menu .menu-item{ display:flex; flex-direction:row; width:100%; height:auto; padding:13px 30px; border:1px solid var(--menu-border-color); border-width:0 0 1px 0; align-items: center; justify-content: flex-start; cursor:pointer; transition: all 0.1s; }
                #main .menu .menu-item.act{background-color:var(--color-primary-background);}
                    #main .menu .menu-item p{ flex:1 1 100%; margin:0; padding:0; color:var(--color-p); font-size:14px; transition: all 0.5s;}
                    #main .menu .menu-item.openclose p{ color:var(--menu-p-openclose-color); }
                    #main .menu .menu-item.act p{color:var(--menu-p-act-color);}
                    #main .menu .menu-item .arrow{ flex:0 0 3px; border:solid var(--color-primary-background); border-width: 0 2px 2px 0; display:inline-block; padding:3px; margin:2px 0 0 20px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transition: all 0.1s;  }
                    #main .menu .menu-item.close .arrow{ margin:-3px 0 0 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }

                #main .menu .menu-subitem{display:flex; flex-direction:column; width:100%; height:auto; padding:7px 10px 7px 42px; border:1px solid var(--menu-border-color); border-width:0 0 1px 0; align-items: flex-start; justify-content: center; background: var(--menu-background-color2);  cursor:pointer; transition: all 0.1s; }
                #main .menu .menu-subitem.act{background-color:var(--color-primary-background);}
                    #main .menu .menu-subitem p{margin:0; padding:0; color:var(--menu-p-color); font-size:13px; transition: all 0.1s;}
                    #main .menu .menu-subitem.act p{color:var(--menu-p-act-color);}

                #main .menu .external-links{width:100%; height:auto; padding:20px 30px;}
                   #main .menu .external-links a{display:block; font-size:12px; width:100%; margin:15px 0 0 0;}

        #main .page-content{ display:flex; width:100%; height:100%; overflow:auto; flex-direction:column; padding:100px 360px 70px 360px; background:var(--content-background-color); }
            #main .page-content .content_block{display:flex; flex-direction: column; width:100%; height:auto; padding:0 0 50px 0;}
            #main .page-content h1{ display:block; margin:10px 0 20px 0; font-weight:500; font-size:36px; color:var(--color-h1);}
            #main .page-content h2{ display:block; margin:70px 0 10px 0; font-weight:300; font-size:32px; color:var(--color-h2);}
            #main .page-content h3{ display:block; margin:40px 0 0 0; font-weight:300; font-size:24px; color:var(--color-h3);}
            #main .page-content h4{ display:block; margin:30px 0 0 0; font-weight:300; font-size:20px; color:var(--color-h4);}
            #main .page-content h5{ display:block; margin:20px 0 0 0; font-weight:normal; font-size:16px; color:var(--color-h5);}

            #main .page-content > ul{ padding-inline-start: 25px; overflow-wrap: anywhere; padding-bottom: 0; margin: 20px 0 0 0; }
            #main .page-content > ol{ padding-inline-start: 25px; overflow-wrap: anywhere; padding-bottom: 0; margin: 20px 0 0 0; }
                #main .page-content li{ font-size:14px; word-break: break-word; margin-top:3px; margin-left:30px; color:var(--color-p); }
            #main .page-content p + ul{ margin-top:0; }
            #main .page-content td ul{ margin-top:0; }
            #main .page-content li:has(ul) + li{ margin-top:10px; }

            #main .page-content p{ display:block; margin:20px 0 0 0; font-size:14px; color:var(--color-p);}
            #main .page-content p.warning{display:block; margin:30px 0 20px 0; padding:0 0 0 10px; font-size:14px; border:4px solid #ed1441; border-width:0 0 0 4px;}
                #main .page-content p.warning span{ font-weigth:500; margin-right:10px; color:#ed1441;}
            #main .page-content p.note{ color:#a4b1c2; background:#31496c; padding: 5px 20px 3px 10px; font-size:12px; border-radius: 3px 3px 0 0; }
            #main .page-content p.note.good{ color:#a9cdbc; background:#294e25;}
            #main .page-content p.note.bad{ color:#c2a4a4; background:#6c3131;}
    
            #main .page-content ul p{ margin-top:0; }

            #main .page-content a.link2h5{ color:var(--color-h5);}

            #main .page-content .link_block{display:flex; width:100%; height:auto; margin:15px 0 0 0;padding:10px 20px; background:#333333; color:#FFFFFF; font-size:14px; border-radius: 3px;}
            #main .page-content .link_button{display:flex; width:140px; height:auto; margin:10px 0 0 0; padding:10px 20px; justify-content: center; background:var(--color-primary); color:var(--color-primary-revers); font-size:14px; border-radius: 3px;}
            #main .page-content .code_title{display:flex; width:100%; height:auto; margin-bottom:0; padding:5px 20px 3px 20px; border:2px solid var(--json-background-color); border-radius: 5px 5px 0 0; background:var(--json-title-background-color); color:var(--color-p); font-size:14px;}
            #main .page-content .code_title.request{background:var(--json-title-request-background-color);}
            #main .page-content .code_title.result_good{background:var(--json-title-good-background-color);}
            #main .page-content .code_title.result_bad{background:var(--json-title-bad-background-color);}
            #main .page-content code{display:block; width:100%; height:auto; overflow: auto; margin:0; padding:10px 20px; border-radius: 0 0 5px 5px; background:var(--json-background-color); color:var(--json-p-color); font-size:14px; /*white-space: pre-wrap;  overflow-wrap: anywhere;*/}
                #main .page-content code .json-line{color:var(--json-p-color); white-space: nowrap; }
                #main .page-content code span.key{color:var(--json-key-color);}
                #main .page-content code span.value{color: var(--json-value-color); white-space: nowrap;  overflow-wrap: normal;}
                #main .page-content code span.string{color: var(--json-string-color); white-space: nowrap;  overflow-wrap: normal;}
                #main .page-content code span.null{color:var(--json-null-color);}
                #main .page-content code span.boolean{color:var(--json-boolean-color);}
                #main .page-content code span.number{color: var(--json-number-color);}
            #main .page-content .code2{display:block; width:100%; height:auto; overflow: auto; margin:0; padding:10px 20px; border-radius: 0 0 3px 3px; background:#202226; color:#FFFFFF; font-size:14px; white-space: pre-wrap;  overflow-wrap: anywhere;}
            #main .page-content .example{display:flex; width:100%; height:auto; padding:20px 40px; border-radius:3px; background:#2e3642; color:#FFFFFF; font-size:14px;}
            #main .page-content .table_section{ display:block; flex:auto 0 0; width:100%; height:auto; overflow:auto; margin:20px 0 0 0; }
                #main .page-content table{ width:100%; min-width:600px; table-layout: auto; word-wrap: break-word; border-radius: 5px; overflow:hidden; }
                    #main .page-content tr{ border:1px solid var(--table-border-color); border-width:1px 0; width:100%;}
                    #main .page-content tr:nth-child(2n){ }
                        #main .page-content th{padding:8px 15px; font-size:13px; font-weight:400; background:var(--table-th-background-color); color:var(--table-th-p-color);}
                        #main .page-content td{padding:4px 15px 4px 15px; font-size:14px; font-weight: normal; transition: all 0.5s; overflow-wrap: anywhere; background:var(--table-td-background-color1); color:var(--table-p-color); }
                        #main .page-content td:nth-child(2){ background:var(--table-td-background-color2); }
                        #main .page-content td:nth-child(4){ background:var(--table-td-background-color2); }
                        #main .page-content td:nth-child(6){ background:var(--table-td-background-color2); }
                            #main .page-content td u{color:var(--table-u-color); text-decoration:none;}
                            #main .page-content td ul{padding-inline-start: 5px; margin-bottom:0; }
                            #main .page-content td ol{padding-inline-start: 5px; margin-bottom:0; }
                                #main .page-content td li{font-size:14px;}
                        #main .page-content tr:hover td{ background: var(--table-td-hover-background-color);}

        #main .navigator{ position:absolute; right:20px; top:0; display:flex; width:310px; flex-direction:row; align-items:flex-start; padding:75px 50px 0 0;}
            #main .navigator .nav-body{ display:flex; visibility:visible; flex:0 0 100%; flex-direction:column; height:auto; margin:20px 0 0 0; }
                #main .navigator .nav-body .nav-title{display:block; width:100%; font-weight:600; font-size:14px; color:var(--color-p); cursor:default;}
                #main .navigator .nav-body .nav-item{display:block; width:100%; padding:5px 0 5px 20px; font-size:14px; color:var(--color-p); cursor:pointer; border-left: 4px solid var(--navigator-border-left-color); transition: all 0.1s; }
                #main .navigator .nav-body .nav-item2{padding:5px 0 5px 20px;}
                #main .navigator .nav-body .nav-item3{padding:3px 0 3px 40px;}
                #main .navigator .nav-body .nav-item:hover{ border-left: 4px solid var(--color-primary-background); }
                #main .navigator .nav-body .nav-item.act{ border-left: 4px solid var(--color-primary-background); }
                    #main .navigator .nav-body .nav-item p{margin:0; padding:0; color:var(--color-p); font-size:13px; line-height:140%; }
                    #main .navigator .nav-body .nav-item.act p{color:var(--color-primary-text);}
                #main .navigator .nav-body .nav-subitem{display:block; width:100%; margin: 0 0 10px 30px; font-size:14px; color:var(--color-p); cursor:pointer;}
                    #main .navigator .nav-body .nav-subitem p{margin:0; padding:0; color:var(--color-primary-text); font-size:14px; line-height:140%; }
                    #main .navigator .nav-body .nav-subitem:hover p{color:var(--color-primary-text);}

    /*Small devices (landscape phones, 576px and up)*/
    @media (max-width: 575.98px) {
        header .burger-menu-but--path{display:flex;}
        header .logo-path{ padding: 0; }
            header .logo-path .logo{  }
                header .logo-path .logo img{ height:30px; }
            header .logo-path h1{ font-size: 14px; }
        header .lang-path{  }
        
        #main .page-content{padding:100px 30px 70px 30px;}
            #main .page-content h1{ margin:10px 0 10px 0; }
            #main .page-content h2{ margin:40px 0 10px 0; }
        
        #main .navigator{display:none;}
        #main .menu{ margin-left:-310px; height:100%; overflow:auto; transition: margin 0.1s; }
        #main .menu.visible{ width:310px; height:100%; margin-left:0; overflow:auto; }
    }

    /*Medium devices (tablets, 768px and up)*/
    @media (min-width: 576px) and (max-width: 767.98px) {
        header .burger-menu-but--path{display:flex;}
        header .logo-path{ padding: 0; }
            header .logo-path .logo{  }
                header .logo-path .logo img{ height:30px; }
            header .logo-path h1{ font-size: 14px; }
        header .lang-path{  }
        
        #main .page-content{padding:100px 30px 70px 30px;}
            #main .page-content h1{ margin:10px 0 10px 0; }
            #main .page-content h2{ margin:40px 0 10px 0; }
        
        #main .navigator{display:none;}
        #main .menu{ margin-left:-310px; height:100%; overflow:auto; transition: margin 0.1s; }
        #main .menu.visible{ width:310px; height:100%; margin-left:0;  overflow:auto; }

    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        header .burger-menu-but--path{display:flex;}

        #main .page-content{padding:100px 30px 70px 30px;}
            #main .page-content h1{ margin:10px 0 10px 0; }
            #main .page-content h2{ margin:40px 0 10px 0; }
        
        #main .navigator{display:none;}
        #main .menu{ margin-left:-310px; height:100%; overflow:auto; transition: margin 0.1s; }
        #main .menu.visible{ width:310px; height:100%; margin-left:0; overflow:auto; }
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        
        #main .page-content{padding:100px 30px 70px 360px;}
        
        #main .navigator{display:none;}
    }

    @media (min-width: 1200px) {
        /*#main .menu .menu-item:hover{background-color:var(--color-primary-background);}*/
        /*    #main .menu .menu-item:hover p{color:var(--menu-p-act-color);}*/
        /*    #main .menu .menu-item:hover .arrow{border-color:var(--color-primary-revers);}*/
        /*#main .menu .menu-subitem:hover{background-color:var(--color-primary-background);}*/
        /*    #main .menu .menu-subitem:hover p{color:var(--menu-p-act-color);}*/
    }

    @media (min-width: 2000px) {
        #main{width:2300px; margin:0 auto;}
    }