.api-manual {
    h2 {
        line-height: 15px;
        font-weight: normal;
    }

    pre {
        margin-bottom: 0;
    }

    .copy-icon {
        transition: color 0.3s ease;
        position: absolute;
        top: 6px;
        right: 2px
    }
   
    .accordion-item {
        .accordion-header {
            .accordion-button {
                padding: 10px;
                background-color: #f6f6f6;
                font-size: 13px;
                font-weight: normal;
                &:hover{
                    background-color: #eaeaea;
                }
            }

            .accordion-button::after {
                transform: scale(.7);
            }

            .accordion-button:focus {
                box-shadow: none;
                border-color: transparent;
                outline: none;
            }
        }

        .accordion-body {
            line-height: 25px;
            font-size: 13px;
            font-weight: normal;

            a {
                font-size: 12px;
                font-weight: normal;
                &:hover{
                    color: var(--main-feature-color) !important;
                }
            }
        }
    }

    a:not(.selected) {
        --bs-text-opacity: 1;
        color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
    }


    .accordion {
        max-width: 300px;
        @media (max-width: 768px) {
            width: 100%;
            max-width: 100%;
            margin-bottom: 5px;

        }
    }


}

.url-sample {
    direction: ltr;
    display: flex;
    border: 1px solid #e7e9ed !important;
    border-radius: .375rem !important;
    padding: .25rem !important;
    font-family: Tahoma, sans-serif !important;
    .url-content{
        --bs-text-opacity: 1;
        color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity)) !important;
        word-break: break-all;
        margin-right: 5px;
    }
    .copy-icon-url {
        transition: color 0.3s ease;
        margin-left: auto !important;
        --bs-text-opacity: 1;
        color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity));
        cursor: pointer;
    }
}

.view-container {
    min-height: 500px;

    a {
        --bs-text-opacity: 1;
        color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
    }

    @media (max-width: 768px) {
        margin-right: 0 !important;
        margin-top: .5rem !important;
    }
}


.api-manual.dir-ltr {
    .accordion-button::after {
        margin-right: 0 !important;
        margin-left: auto !important;
    }
}

/*.custom-cdk-accordion-item-header:hover {*/
/*    background-color: #eee;*/
/*}*/

.side-bar-menu {
    width: 240px;
    flex-shrink: 0;

    .sub-menu-item {
        font-size: .75rem;

        a:not(.active) {
            color: #383838;
            opacity: 0.7;

            &:hover {
                color: #6f80d5;
                cursor: pointer;
                opacity: .9;
            }
        }

        a.active {
            color: #556ee6;

            &:hover {
                cursor: pointer;
            }
        }

    }

    @media (max-width: 768px) {
        width: 100%;
    }
    @media (min-width: 768px) {
            position: sticky;
            top: 3rem !important;
            width: 240px;
            height: 300px
    }

}

.method-name-color {
    color: rgb(199, 21, 133);
}

.request-bg {
    background-color: rgba(253, 242, 208, 0.18);
}

.result-bg {
    background-color: #c7d9bf2e !important;
}

.error-codes-bg {
    background-color: #fdf5fd !important;
}

.table, .table > :not(caption) > * > * {
    background-color: transparent !important;
}

.no-gap {
    padding: 0;
    margin: 0;
}

.table-custom {
    border-collapse: collapse;
    width: 100%;
}

.table-custom td, .table-custom th {
    border: 0;
    padding: 3px;
}

.col-auto {
    white-space: nowrap;
    vertical-align: top;
}

.col-fill {
    width: 100%;
    padding-right: 5px !important;
    vertical-align: top;
}


.tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    transition: background-color 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
}

pre {
    font-family: Tahoma, sans-serif !important;
    font-size: .8125rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    background-color: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    text-align: left;
}

ul {
    margin: 0;
    padding-right: 1.2rem;

    li {
        margin-bottom: 0.2rem;
    }
}

ul ul {
    list-style-type: square;
}

ul.none-style {
    list-style-type: none !important;
}

.col-md-auto {
    white-space: nowrap;
    vertical-align: top;
}

@media (max-width: 768px) {
    .custom-width {
        width: 100% !important;
        direction: ltr !important;
    }

    .col-md-auto {
        white-space: inherit;
    }
}