:root {
        --color-primary: #007676;
        --color-h5: #d3577e;
    }

    *{font-family:'Roboto', sans-serif; box-sizing: border-box; color:#333333;}
    html{margin:0; padding:0; height:100%; min-height:100%; }
    body{margin:0; padding:0; height:100%; min-height:100%; }

    .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;}

    .red{color:#ed1441 !important;}

    header{ position: fixed; top:0; left:0; display:flex !important; width:100%; height:72px; background:#FFFFFF; flex-direction:row; justify-content: flex-start; align-items: center;  box-shadow: 0 2px 3px #efefef; z-index:100; }

        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 #e5e5e5; border-radius: 3px; transition: 0.5s; }
                .burger-menu-but--line{ width:70%; height:2px; background:var(--color-primary); margin:5px 0 0 15%; }
            .burger-menu-but--path.act .burger-menu-but{ border:2px solid var(--color-primary); background: var(--color-primary); }
                .burger-menu-but--path.act .burger-menu-but--line{ background: #ffffff; }

        header .logo-path{display:flex; flex:0 0 60%; height:auto; padding:0 30px; justify-content: flex-start; align-items: center;}
            header .logo{ flex:0 0 90px; height:auto; }
                header img{ height:30px; }
            header h1{ flex:0 0 auto; font-size:18px; font-weight:normal; color:var(--color-primary); text-transform: uppercase; margin:0 0 0 20px; padding:0; }
            header .version { flex:0 0 auto; white-space: nowrap; font-size:12px; color:var(--color-primary); margin:4px 0 0 10px; }

        header .lang-path{ display:flex; flex:0 0 40%; height:auto; padding:0 20px; align-items: center;}
            .lang-block{ display:flex; flex:0 0 100%; flex-direction: row; justify-content: flex-end; }
                .lang-el{ display:flex; flex: 0 0 50px; margin:0 5px; }
                    .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 #FFFFFF; border-radius: 4px; background:#FAFAFA; cursor:pointer; font-size: 12px; transition: background-color 300ms, color 300ms;}
                    .lang-el input:checked + label{ background:var(--color-primary); color:#FFFFFF; }

    #main{ display:flex !important; flex-direction:row; width:100%; min-height:100%; align-items: stretch;}

        #main .menu{ display:flex; flex:0 0 250px; flex-direction:column; padding:0; border:1px solid #e5e5e5; border-width:0 1px 0 0; overflow: auto; padding: 75px 0 0 0; height: 100%;}
            #main .menu-path{ position: -webkit-sticky; position: sticky; top:80px; width:100%; height:auto;}
                #main .menu .menu-item{ display:flex; flex-direction:row; width:100%; height:auto; padding:13px 30px; border:1px solid #e5e5e5; border-width:0 0 1px 0; align-items: center; justify-content: flex-start; cursor:pointer; transition: all 0.5s; }
                #main .menu .menu-item.act{background-color:var(--color-primary);}
                    #main .menu .menu-item p{ flex:1 1 100%; margin:0; padding:0; color:#333333; font-size:14px; transition: all 0.5s;}
                    #main .menu .menu-item.act p{color:#FFFFFF;}
                    #main .menu .menu-item .arrow{ flex:0 0 3px; border:solid var(--color-primary); 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.5s;  }
                    #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 20px 7px 42px; border:1px solid #FFFFFF; border-width:0 0 1px 0; align-items: flex-start; justify-content: center; background: #f1f0f0;  cursor:pointer; transition: all 0.5s; }
                #main .menu .menu-subitem.act{background-color:var(--color-primary);}
                    #main .menu .menu-subitem p{margin:0; padding:0; color:#333333; font-size:13px; transition: all 0.5s;}
                    #main .menu .menu-subitem.act p{color:#FFFFFF;}

                #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; flex:1 1 100%; flex-direction:column; padding:100px 5% 70px 60px; background:#fafafa; }
            #main .page-content h1{ display:block; margin:10px 0 20px 0; font-weight:500; font-size:48px; color:#333333;}
            #main .page-content h2{ display:block; margin:10px 0 20px 0; font-weight:500; font-size:36px; color:#333333;}
            #main .page-content h3{ display:block; margin:60px 0 10px 0; font-weight:500; font-size:24px; color:#369AAF;}
            #main .page-content h4{ display:block; margin:40px 0 10px 0; font-weight:500; font-size:20px; color:#333333;}
            #main .page-content h5{ display:block; margin:20px 0 0 0; font-weight:normal; font-size:16px; color:#333333;}
                #main .page-content h5 b{ color:var(--color-h5);}

            #main .page-content ul{ padding-inline-start: 25px; overflow-wrap: anywhere; }
            #main .page-content ol{ padding-inline-start: 25px; overflow-wrap: anywhere; }
                #main .page-content li{ font-size:14px; word-break: break-word; margin-top:3px; margin-left:30px; }

            #main .page-content p{ display:block; margin:20px 0 0 0; font-size:14px; color:#333333;}
            #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 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:#FFFFFF; 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 #202226; border-radius: 3px 3px 0 0; background: #a1a1a1; color:#333333; font-size:14px;}
            #main .page-content .code_title.request{background: #93abb9;}
            #main .page-content .code_title.result_good{background: #b0bbae;}
            #main .page-content .code_title.result_bad{background: #ad9696;}
            #main .page-content .code{display:block; width:100%; height:auto; margin:0; padding:0 20px; border-radius: 0 0 3px 3px; background:#202226; color:#FFFFFF; font-size:14px; /*white-space: pre-wrap;  overflow-wrap: anywhere;*/}
                #main .page-content .code span.variable{color:#92ceed;}
                #main .page-content .code span.value{color: #85d9be; white-space: pre-wrap;  overflow-wrap: anywhere;}
                #main .page-content .code span.number{color: #fdffb4;}
            #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{ width:100%; }
                #main .page-content tr{border:1px solid #e5e5e5; border-width:1px 0; width:100%;}
                #main .page-content tr:nth-child(2n){ background: #FCFCFC;}
                    #main .page-content th{padding:8px 15px; font-size:12px; font-weight: bold; background:#f3f3f3;}
                    #main .page-content td{padding:4px 15px 4px 15px; font-size:12px; font-weight: normal; transition: all 0.5s; overflow-wrap: anywhere; }
                    #main .page-content td:nth-child(2){ background:#FFFFFF; }
                    #main .page-content td:nth-child(4){ background:#FFFFFF; }
                    #main .page-content td:nth-child(6){ background:#FFFFFF; }
                        #main .page-content td u{color:#c6c8ca; 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:12px;}
                    #main .page-content tr:hover td{ background: #EFEFEF;}

        #main .navigator{ position:relative; display:flex; flex:0 0 270px; flex-direction:row; align-items: flex-start; padding:0 50px 0 0; background: #fafafa;}
            #main .navigator .nav-body{ position:sticky; top:120px; 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; font-weight:600; font-size:13px; color:#333333; cursor:default;}
                #main .navigator .nav-body .nav-item{display:block; padding:5px 0 5px 20px; font-size:13px; color:#333333; cursor:pointer; border-left: 4px solid #f1f0f0; transition: all 0.5s; }
                #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); }
                #main .navigator .nav-body .nav-item.act{ border-left: 4px solid var(--color-primary); }
                    #main .navigator .nav-body .nav-item p{margin:0; padding:0; color:#333333; font-size:13px; line-height:140%; }
                    #main .navigator .nav-body .nav-item.act p{color:var(--color-primary);}
                #main .navigator .nav-body .nav-subitem{display:block; margin: 0 0 10px 30px; font-size:13px; color:#333333; cursor:pointer;}
                    #main .navigator .nav-body .nav-subitem p{margin:0; padding:0; color:#333333; font-size:13px; line-height:140%; }
                    #main .navigator .nav-body .nav-subitem:hover p{color:var(--color-primary);}

    /*Small devices (landscape phones, 576px and up)*/
    @media (max-width: 575.98px) {
        header .burger-menu-but--path{display:flex;}
        header .logo-path{ flex-wrap: wrap; flex:1 1 30%; padding:0 30px 0 10px; }
            header .logo-path .logo{ padding:0; margin:2px 0 0 0; }
            header .logo-path h1{ padding:0; margin:0 0 0 28px; font-size:14px; }
            header .logo-path .version{ display:none; }
        header .lang-path{ flex:1 1 30%; }

        #main .navigator{display:none;}
        #main .menu{ position:fixed; margin-left:-220px; height:100%; overflow:auto; background:#FFFFFF; transition: margin 0.5s; }
        #main .menu.visible{ position:fixed; width:250px; height:100%; margin-left:0;  overflow:auto; background:#FFFFFF;}

        #main .page-content{ padding-left:30px; }
    }

    /*Medium devices (tablets, 768px and up)*/
    @media (min-width: 576px) and (max-width: 767.98px) {
        #main .navigator{display:none;}
        #main .menu{flex:0 0 250px;}
    }


    @media (min-width: 768px) and (max-width: 991.98px) {
        #main .navigator{display:none;}
        #main .menu{flex:0 0 250px;}
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        #main .navigator{display:none;}
    }

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

    @media (min-width: 2000px) {
        #main .navigator{flex:0 0 35%; }
    }