pre {
    line-height: 125%;
    margin-bottom: 0;
}

td.linenos .normal {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
}

span.linenos {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
}

td.linenos .special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
}

span.linenos.special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
}

.highlight .hll {
    background-color: #49483e
}

.highlight {
    background: #444;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.highlight::-webkit-scrollbar {
    height: 10px;
}

.highlight pre {
    /*padding: 10px 20px;*/
    background: var(--light-button, #DFE3EC);
}

.highlight pre::-webkit-scrollbar {
    width: 5px; /* Устанавливаем ширину скроллбара */
}

.highlight pre::-webkit-scrollbar-thumb {
    background: #888; /* Цвет ползунка */
    border-radius: 10px; /* Закругление углов */
}

.highlight pre::-webkit-scrollbar-thumb:hover {
    background: #555; /* Цвет ползунка при наведении */
}

.highlight pre {
    scrollbar-width: thin; /* Устанавливаем тонкий скроллбар */
    scrollbar-color: #888 #333; /* Цвет ползунка и фона скроллбара */
}

#article {
	display: flex;
	flex-direction: column;
	gap: 30px;
	color: var(--text-alter-color);
}


#article h1, #article h2, #article h3, #article h4 {
    margin: 10px 0 5px 0;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.02rem;
}

#article h2 {
    font-size: 1.5rem;
    color: var(--arteicle-h2-text-color);
}

#article h3 {
    font-size: 1.125rem;
    margin: 5px 0 2px 0;
    text-decoration: none;
    color: #525355;
    font-weight: 500;
}

#article h4 {
    font-size: 1rem;
}

#article ul {
	list-style-type: disc;
	gap: 0.7rem;
	display: flex;
	flex-direction: column;
	padding-left: 2rem;
	line-height: 1.6;
}

#article ol {
    padding-left: 20px;
}

#article a {
    color: #00B0FF;
}

#article a:hover {
    text-decoration: underline;
}

#article img {
    max-width: 100%;
/*    border-radius: 5px; */
/*    margin: 0 5px; */
}

#article p {
	color: var(--text-alter-color);
	font-size: 1.2rem;
	font-style: normal;
	font-weight: 450;
	line-height: 1.7;
	letter-spacing: 0.05rem;
}

.code-copy {
    transition: .3s;
    cursor: pointer;
    font-size: .8rem;
}

.code-copy.copied {
    color: green;
}

.code-copy:hover {
    color: gray;
}

.code-copy.copied:hover {
    color: green;
}

.code-lang {
    font-size: .8rem;
}

#article pre code{
    /*display: flex;*/
    padding: 10px 20px;
    /*align-items: flex-start;*/
    /*gap: 10px;*/
    align-self: stretch;
    background: var(--light-button, #DFE3EC);
}

#article code:not(#article pre code) {
    background: #dcdee6;
    color: #363841;
    padding: 0 3px;
    border-radius: 3px;
    cursor: pointer;
    transition: .3s;
	line-height: 2;
}

#article code.copied:not(#article pre code) {
    background: #24557f;
    color: #dcdee6;
}

#article code {
    font-family: "Space Mono", monospace;
    letter-spacing: 0.05rem;
}

#article .copyCode {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

#article .copyCode.active {
    color: #00df00;
}

#article .copyCode svg {
    width: 16px;
    height: 16px;
    transition: .3s;
}

#article .copyCode:hover {
    color: #dcdcdc;
}

.top-nav-code {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #B6ACAC;
    background: var(--section-color, #212733);
    box-shadow: 0 4px 4px 0 rgba(253, 0, 0, 0.25);

    color: var(--text-color, #FFF);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.6px;
}

#article table {
    width: 100%;
    border: none;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;

}
#article table tr{
    display: flex;
}
#article table thead th {
    font-weight: bold;
    text-align: left;
    border: none;
    padding: 10px 15px;
    background: #ddd;
    font-size: 14px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    flex: 1;
}

#article table tbody td {
    text-align: left;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 10px 15px;
    font-size: 14px;
    vertical-align: top;
    flex: 1;
}

#article table thead tr th:first-child,
#article table tbody tr td:first-child {
    border-left: none;
}
#article table thead tr th:last-child,
#article table tbody tr td:last-child {
    border-right: none;
}

#article table tbody tr:nth-child(even) {
    background: #f3f3f3;
}
@media (max-width: 809px) {
    #article p,
    #article ul {
        line-height: 1.5;
    }
    #article img {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding-bottom: 10px;
    }
}