@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-Medium.ttf") format("ttf");
}

body {
    font-family: "Poppins", sans-serif;
}

.hint-btn {
    background-color: transparent;
    border: none;
    padding: 0;
}

.hint-btn svg {
    width: 15px;
}

.hint-btn:hover {
    background-color: transparent;
    cursor: default;
}

.code-snippet {
    background-color: black;
    color: white;
    padding: 1rem;
    position: relative;
}

.code-snippet p,
.code-snippet pre {
    width: 90%;
    white-space: normal;
}

.response-snippet {
    padding: 1rem;
    position: relative;
}

.response-snippet pre {
    width: 90%;
}

.response-snippet button {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.response-snippet button svg {
    fill: black;
}

.copy-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: transparent;
    border: none;
}

.copy-btn {
    fill: white;
}

.copy-btn:hover {
    opacity: 0.8;
    cursor: pointer;
}

.code-blue {
    color: #3000fd;
}

.code-red {
    color: #9c211a;
}

.copied-msg {
    position: absolute;
    right: 1rem;
    top: 3rem;
    display: none;
}

.doc-menu::-webkit-scrollbar {
    width: 4px;
}

.doc-menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.doc-menu::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px #df511d;
}

/* overwriting styles */
.body-pink .header {
    border-color: #df511d;
    background: linear-gradient(28.25deg, #005683 20.94%, #238abe 65.96%);
}

.body-pink .branding .text-highlight,
.body-pink .branding .icon,
.doc-header .icon,
.body-pink .doc-header .doc-title,
.footer .fa-heart,
.body-pink a {
    color: #df511d;
}

.body-pink .nav-item.active .nav-link {
    color: #df511d;
    border-color: #df511d;
}

.img-tooltip {
    top: 50%;
    left: 18%;
}

.img-container {
    width: fit-content;
    margin: auto;
}

.workflow-steps li {
    margin-bottom: 1rem;
}

@media (min-width:768px) {
    .img-container {
        margin: revert;
        width: revert;
    }
}