*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --primaryColor : rgb(16, 29, 70);
    --secColor : rgb(84, 101, 130);
}
body{
    background-color: whitesmoke;
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    word-break: break-word;
}
a{
    text-decoration: none;
    color: black;
}
.header{
display: none;
position: fixed;
top: 0;
right: 0px;
left: 0px;
background: rgb(0, 39, 54);
/* display: flex; */
align-items: center;
justify-content: space-between;
padding: 5px 10px;
z-index: 5;
}
.headerlogo{
width: 100px;
height: 50px;
}
.headerlogo img{
width: 100%;
height: 100%;
}
.bars{
cursor: pointer;
}
.bars i{
    font-size: 16px;
color: whitesmoke;
}
.overrall{
    margin-top: 60px;
}
.sidemenu{
/* padding-top: 40px; */
padding-right: 10px;
padding-left: 10px;
position: fixed;
top: 0px;
left: 0px;
height: 100vh;
padding-left: 10px;
border-right: 1px solid blueviolet;
overflow: auto;
}

.sidemenu li{
padding: 10px;
}
.sidemenu li a{
text-transform: capitalize;
font-size: 14px;
font-weight: 600;
}
.sidemenu li a:hover{
color: blue;
}

.mainmenu{
    width: 80%;
    position: relative;
    /* top: 40px; */
    left: 170px;
    border-top: 1px solid blueviolet;
}
h1, h2,h3,h4, h6{
    text-transform: capitalize;
    padding: 10px;
}
.introduction h1{
    padding: 10px
}



.apiscon{
margin-top: 40px;
}
.apiscon h1{
padding: 10px;
}


.endpointtitle{
margin-top: 40px;
}

.endpointdetails{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px;
    border-bottom: 1px solid var(--primaryColor);
}
.endpointtype{
background-color: var(--primaryColor);
border-radius: 5px;
padding: 3px;
margin-right: 10px;
margin-top: 5px;
}
.endpointtype h6{
    text-transform: uppercase;
    color: white;
    font-size: 15px;
}
.endpointdescription{
    background-color: var(--secColor);
    border-radius: 5px;
    margin-top: 5px;
}
.endpointdescription p{
    color: white;
    padding: 11px;
    word-break: break-word;
}
.endpointheader{
padding-bottom: 20px;
    border-bottom: 1px solid var(--primaryColor);
}

.bodyflex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bodyparamcontent{
    border-bottom: 1px solid;
    padding: 10px;
    margin: 10px 0px;
}
.paramcontentheader{
    display: flex;
    align-items: center;
    padding: 5px 0px;
}
.datatype{
    border-radius: 5px;
    background-color: rgba(128, 128, 128, 0.22);
    padding: 6px;
    margin-left: 10px;
}
.bodyparamscat{
    width: 80%;
    margin-right: 10px;
}
.paramreq{
margin-bottom: 10px;
border-radius: 10px;
background: rgb(47 121 151);
}
.paramrep{
border-radius: 10px;
background: rgba(180, 203, 213, 0.2);
color: rgba(0,0,0,.75);
}
.paramreq .paramreqheader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: 15px;
    background: rgb(0, 39, 54);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    color: whitesmoke;
}
.paramrep .paramreqheader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: 15px;
    background: rgba(180, 203, 213, 0.4);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    color: whitesmoke;
}

.paramreqheader .copy{
cursor: pointer;
}
.status{
    position: absolute;
    top: 1px;
    right: 1px;
    background-color: rgba(128, 128, 128, 1);
    text-transform: capitalize;
    font-size: 16px;
    padding: 9px 2px !important;
    display: none;
}
.paramreq p{
padding: 25px 10px;
}
.paramrep p{
padding: 25px 10px;
}
.channelname{
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(0, 39, 54);
}
@media(max-width: 700px){
    .header{
        display: flex;
    }
    .sidemenu{
        background: #002736;
        position: fixed;
        top: 60px;
        left: -100%;
        z-index: 10;
    }
    .sidemenu a{
        color: white;
    }
    .mainmenu{
        width: 95%;
        left: 10px;
        right: 10px;
    }
    .bodyflex{
        flex-wrap: wrap;
    }
    .bodyparamscat{
        width: 100%;
    }
}