@media only screen and (min-width: 240px) and (max-width: 992px) {}
@media only screen and (min-width: 240px) and (max-width: 575px) {
    header {
        display: block;
        padding: 0 10px;
        height: auto;
        overflow: initial;
    }

    header:before,
    header:after {
        display: none;
    }

    .headerWrap {
        display: flex;
        justify-content: flex-start;
        align-items: end;
    }

    .mobileNav,
    .mobileFilter {
        display: block;
    }

    .logo {
        padding: 11px 0px 5px !important;
    }
    .filter {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        color: var(--black);
    }

    .selectOption {
        display: block;
        width: 100%;
        border: solid 1px var(--black);
        height: auto;
    }

    .filter {
        background: #fff;
        padding: 10px;
        margin: 0 -10px;
        display: none;
        position: absolute;
        width: 100%;
    }

    .select {
        display: block;
        padding: 0 5px;
        color: var(--black);
        margin-bottom: 1.5rem;
    }

    .selectOption select {
        color: var(--black);
        width: 100%;
        padding: 1rem;
    }

    .selectOption::after {
        border: solid var(--black);
        border-width: 0 1px 1px 0;
    }
    .select label {
        color: #000;
    }
    aside {
        right: -250px;
        left: auto;
        padding: 0px;
        margin: 0;
        z-index: 10;
        width: 250px;
        overflow: hidden;
        transition: .3s ease all;
    }

    aside.active {
        /*transform: translateX(0%);*/
        transition: .3s ease all;
        box-shadow: 0 0 50px rgb(0 0 0 / 40%);
        padding: 0 0 30px;
        right: 0px;
    }

    nav {
        overflow: hidden;
        overflow-y: auto;
        position: relative;
        height: 100%;
        padding: 0px;
        margin-top: 30px;
    }

    .mobileNavClose {
        display: block;
    }

    .mainContainer {
        padding-left: 0;
        overflow: hidden;
        position: static;
        padding-bottom: 0px;
        height: calc(100% - 0px);
    }
    footer {
        position: absolute;
        bottom: -50px;
    }
    .contWrap.fullWidth{
        margin-top: 0;
    }
    
}
@media only screen and (min-width: 240px) and (max-width: 480px) {
    header {
        display: block;
        padding: 0 10px;
        /* height: 65px; */
        height: auto;
        overflow: initial;
    }

    header:before,
    header:after {
        display: none;
    }

    .headerWrap {
        display: flex;
        justify-content: flex-start;
        align-items: end;
    }

    .mobileNav,
    .mobileFilter {
        display: block;
    }

    .logo {
        padding: 11px 0px 5px !important;
    }

    .version {
        position: absolute;
        top: 5px;
        right: 10px;
        height: 30px;
    }

    .version select {
        font-size: 1.3rem;
    }

    .version::after {
        top: 9px;
    }

    .search input {
        width: 100%;
        height: 30px;
        font-size: 1.3rem;
    }

    .search button {
        top: 3px;
    }

    .filter {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        color: var(--black);
    }

    .selectOption {
        display: block;
        width: 100%;
        border: solid 1px var(--black);
        height: auto;
    }

    aside {
        right: -250px;
        left: auto;
        padding: 0px;
        margin: 0;
        z-index: 10;
        width: 250px;
        overflow: hidden;
        transition: .3s ease all;
    }

    aside.active {
        /*transform: translateX(0%);*/
        transition: .3s ease all;
        box-shadow: 0 0 50px rgb(0 0 0 / 40%);
        padding: 0 0 30px;
        right: 0px;
    }

    nav {
        overflow: hidden;
        overflow-y: auto;
        position: relative;
        height: 100%;
        padding: 0px;
        margin-top: 30px;
    }

    .mobileNavClose {
        display: block;
    }

    .mainContainer {
        padding-left: 0;
        overflow: hidden;
        position: static;
        padding-bottom: 0px;
        height: calc(100% - 0px);
    }

    .mainContainer p,
    .link {
        word-wrap: break-word;
    }

    .apiInfo,
    .contWrap,
    .apiInfo.contWrap {
        padding: 15px;
        margin-top: 0px;
    }

    .apiInfo,
    .contWrap,
    .apiDetails,
    .apiInfo.contWrap {
        position: static;
        display: block;
        width: 100%;
    }


    .mainContainer table td span.caption,
    .caption {
        display: block;
    }

    .attDiscription {
        max-width: 250px;
    }

    .attDiscription.top {
        left: 0;
    }

    .tabCode .tab-content>div {
        height: 100%;
    }

    .filter {
        background: #fff;
        padding: 10px;
        margin: 0 -10px;
        display: none;
    }

    .select {
        display: block;
        padding: 0 5px;
        color: var(--black);
        margin-bottom: 1.5rem;
    }

    .selectOption select {
        color: var(--black);
        width: 100%;
        padding: 1rem;
    }

    .selectOption::after {
        border: solid var(--black);
        border-width: 0 1px 1px 0;
    }

    footer {
        position: absolute;
        bottom: 0
    }

    .apiDetails {
        top: 0px;
        margin: 0px;
        height: 500px;
        padding: 10px 15px 10px;
    }

    .select label {
        color: #000;
    }

    /*.tabs {min-height: 0px;}*/
    .tab label,
    .tab2 label,
    .tab3 label,
    .requestResTab label,
    .requestResTab [type=radio]:checked~label {
        padding: 5px 30px;
    }

    .copyright {
        text-align: center;
        width: 100%;
        float: none;
        padding: 5px 0
    }

    .social {
        text-align: center;
        width: 100%;
        float: none;
        margin-top: 20px;
    }

    .grid {
        display: block;
    }

    .content {
        padding: 10px 0px 0px;
        margin-top: 20px;
        top: 15px;
    }

    .copyToast {
        background-color: var(--white);
    }

    .reqtab2:before {
        top: 32px;
    }
}


@media only screen and (min-width: 490px) and (max-width: 992px) {
    .mainContainer {
        overflow: auto;
        padding-bottom: 50px;
    }


    .apiInfo,
    .contWrap {
        padding: 15px;
    }

    .apiInfo,
    .contWrap,
    .apiDetails {
        position: relative !important;
        display: block;
        width: 100%;
    }

    .apiInfo,
    .contWrap,
    .apiDetails,
    .apiInfo.contWrap {
        position: relative;
        display: block;
        width: 100%;
    }


    .mainContainer table {
        table-layout: fixed;
    }

    .mainContainer table th,
    .mainContainer table td {
        word-wrap: break-word;
    }

    .mainContainer table td span.caption,
    .caption {
        display: block;
    }

    .attDiscription {
        max-width: 250px;
    }

    .attDiscription.top {
        left: 0;
    }

    .tabCode .tab-content>div {
        height: 100%;
    }

    .tab label,
    .tab2 label,
    .tab3 label {
        padding: 10px 30px;
    }

    .grid {
        display: block;
    }

    .copyright {
        text-align: center;
        width: 100%;
        float: none;
        padding: 5px 0
    }

    .social {
        text-align: center;
        width: 100%;
        float: none;
        margin-top: 20px;
    }

    footer {
        position: absolute;
        bottom: -50px;
    }


}