/*#region ROOT */
:root {
    /*--body-font: "Inter", sans-serif;*/
    --theme-bg-dark: #1f1d2b;
    --theme-bg-white: #ffffff;
    --body-color: #808191;
    --button-bg-dark: #353340;
    --button-bg-white: #ffffff;
    --blog-text-dark: #353340;
    --blog-text-white: #ffffff;
    --video-bg-dark: #252936;
    --video-bg-white: #ffffff;
    --video-bg-white-secondary: #fafafa;
    --alert-left-border-width: 3px;
    --delay: 0s;

    --elem-radius: 0.25rem;
    --code-token-tag: #0069c2;
    --code-token-punctuation: #858585;
    --code-token-attribute-name: #d30038;
    --code-token-attribute-value: #007936;
    --code-token-comment: #858585;
    --code-token-default: #1b1b1b;
    --code-token-selector: #872bff;
    --code-background-inline: #f2f1f1;
    --code-background-block: #f2f1f1;
    --font-code: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    --type-heading-h1-font-size: 2.488rem;
    --type-heading-h2-font-size: 2.074rem;
    --type-heading-h3-font-size: 1.728rem;
    --type-heading-h4-font-size: 1.44rem;
    --type-heading-h5-font-size: 1.2rem;
    --type-base-font-size-rem: 1rem;
    --type-smaller-font-size: 0.933rem;
    --type-tiny-font-size: 0.694rem;
    --type-heading-h1-font-size-mobile: 1.802rem;
    --type-heading-h2-font-size-mobile: 1.602rem;
    --type-heading-h3-font-size-mobile: 1.424rem;
    --type-heading-h4-font-size-mobile: 1.266rem;

    --code-token-tag: #0069c2;
    --code-token-punctuation: #858585;
    --code-token-attribute-name: #d30038;
    --code-token-attribute-value: #007936;
    --code-token-comment: #858585;
    --code-token-default: #1b1b1b;
    --code-token-selector: #872bff;
    --code-background-inline: #f2f1f1;
    --code-background-block: #f2f1f1;

    --background-primary: #fff;
    --background-secondary: #f9f9fb;
    --background-tertiary: #ebeaea;
    --background-toc-active: #ebeaea;
    --background-mark-yellow: #c7b70066;
    --background-mark-green: #00d06166;
    --background-information: #0085f21a;
    --background-warning: #ff2a511a;
    --background-critical: #d300381a;
    --background-success: #0079361a;

    --icon-size: 1rem;
    --code-action-color: var(--text-secondary);

    --text-primary: #1b1b1b;
    --text-secondary: #4e4e4e;
    --text-active: #858585;
    --text-inactive: #9e9e9ea6;
    --text-link: #0069c2;
    --text-visited: #551a8b;
    --text-invert: #fff;
    --text-muted: #6f6f6f;

    --font-content-line-height: 1.75;
    --font-body-strong-weight: 600;

    --icon-primary: #696969;
    --icon-secondary: #b3b3b3;
    --icon-information: #0085f2;
    --icon-warning: #ff2a51;
    --icon-critical: #d30038;
    --icon-success: #007936;

    --bs-code-color: #d63384;
    --bs-body-font-size: 0.8125rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.4;

    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-card-cap-padding-y: 0.7692307692rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;

    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;

    --bs-link-color-rgb: 30, 145, 207;
    --type-article-p: 400 var(--type-base-font-size-rem) / var(--font-content-line-height) var(--font-body);
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --color-primary-rgb: 34, 34, 34;
    --color-text-secondary: #707f8d;

    --alert-warning: rgba(247, 147, 0, 1);
    --alert-success: #080;
    --alert-red: #c00;
    --alert-info: #1864ab;
    --color-text-success: rgba(16, 196, 76, 1);
    --color-text-danger: #eb4650;

    /*--top-nav-height: 4rem;*/
    --top-nav-height: 6.5rem;
    --article-actions-container-height: 2rem;
    --icon-size: 1rem;
    --sticky-header-without-actions-height: calc(var(--top-nav-height) + 1px);
    --sticky-header-with-actions-height: calc(var(--sticky-header-without-actions-height) + var(--article-actions-container-height) + 1px);

    --border-primary: #cdcdcd;
    --border-secondary: #cdcdcd;
}
/*#endregion ROOT */

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* CSS RESET */
body {
    text-rendering: optimizeLegibility;
}

p:last-child {
    margin-bottom: 0;
}

p {
    font: var(--type-article-p);
}
pre {
    background-color: var(--code-background-block);
    border: 1px solid #0000;
    margin: 1rem 0 2rem;
    padding: 1rem 2.5rem 1rem 1rem;
}

.code-example,
code,
pre {
    border-radius: var(--elem-radius);
    font-size: var(--type-smaller-font-size) !important;
    tab-size: 4;
}
pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

code {
    font-size: 0.875em;
    color: var(--bs-code-color);
    word-wrap: break-word;
    background: #eee;
    padding: 0.1rem 0.5rem;
}
pre,
code,
kbd,
samp {
    font-family: var(--bs-font-monospace);
    font-size: 1em;
}

pre code {
    background: none;
    color: var(--text-primary) !important;
    padding: 0;
    word-break: normal;
}
a,
a:hover,
a:active,
a:focus {
    text-decoration: none;
}

section:not(:first-child) {
    padding: 1rem 0;
}

img {
    max-width: 100%;
}
#page-header {
    padding-bottom: 0px !important;
}
.links-container {
    display: none;
}
.blog-container {
    width: 100%;
}
.blog-container .sidebar .side-menu{
    max-height: 65vh;
}
.stickyContainer-blog-list {
    top: 115px;
    bottom: 15px;
}
.sidebar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition-duration: 0.2s;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar-link {
    color: var(--blog-text-dark);
}
.sidebar-link:hover {
    color: var(--color-primary);
}
.sidebar-link.filtersDesktop-filter-active {
    font-weight: 600;
}
.side-menu svg {
    width: 30px;
    padding: 8px;
    border-radius: 10px;
    background-color: var(--mainBgSecondaryColor);
    flex-shrink: 0;
    margin-right: 16px;
}
.side-menu .not-found-in-list-items svg {
    width: 100%;
    padding: 8px;
    border-radius: 0px;
    background-color: var(--mainBgSecondaryColor);
    flex-shrink: 0;
    margin-right: 0;
}
.side-menu svg:hover {
    color: var(--blog-text-white);
}
.side-wrapper {
    padding: 36px 0;
    width: 100%;
}
.side-wrapper + .side-wrapper {
    border-bottom: none;
}

/*#region search */
.search-bar {
    height: 34px;
    display: flex;
    max-width: 450px;
}
.search-bar.search-bar-headings {
    width: 210px;
    padding: 4px 4px 8px 4px;
}
.search-bar input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    --mixin-calculated-line-height: 24px;
    border-radius: 8px;
    font-weight: 400;
    box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.41);
    width: 100%;
    background: transparent;
    color: var(--color-text-dark);
    border: none;
    outline: none;
    display: block;
    flex: 1 1 auto;
    font-family: var(--mainFont);
    height: 100%;
    line-height: 24px;
    min-width: 0;
    font-size: 16px;
    line-height: 20px;
    padding: 17px 17px 17px 20px;
    z-index: 1;
}
/*#endregion search */

/*#region blog */
.blog-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 30px;
}
.blog__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    overflow: hidden;
    right: 0;
    top: 0;
    transform: translateZ(0);
    transition-duration: 300ms;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-item-img-container {
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    line-height: 0;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    align-items: center;
    margin: 16px;
    transform: translateZ(0);
}
.blog-item-img-container:before {
    content: "";
    display: block;
    width: 100%;
}
.blog-item-img-container.blog-item-img-container-square:before {
    padding-top: 100%;
}
.blog__item a .blog-item-img-container {
    transform: translateZ(0);
    transition-duration: 300ms;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.blog__item:hover a .blog-item-img-container {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.blog__thumb__link {
    transition: var(--transition);
    transition-property: color;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.blog-item-img,
.ha3.blog-item-img-container:after {
    border-radius: 12px;
    left: 0;
    position: absolute;
    top: 0;
}
.blog-item-img {
    align-content: center;
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
    right: 0;
}
.blog-item-img-bg {
    background: rgba(0, 48, 120, 0.039);
    border-radius: 12px;
    pointer-events: none;
    right: 0;
    top: 0;
}
.blog-item-img-bg {
    bottom: 0;
    left: 0;
    position: absolute;
}
.blog-pic-container {
    bottom: 0;
    display: flex;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
}
.blog-pic-item {
    flex: 1 1 auto;
    height: 100%;
}
/*#endregion blog */

/*#region user */
.user-settings {
    display: flex;
    align-items: center;
    padding-left: 20px;
    flex-shrink: 0;
    margin-left: auto;
}
.user-settings svg {
    width: 10px;
    flex-shrink: 0;
}
@media screen and (max-width: 575px) {
    .user-settings svg {
        display: none;
    }
}
.user-settings .notify {
    position: relative;
}
.user-settings .notify svg {
    width: 20px;
    margin-left: 24px;
    flex-shrink: 0;
}
.user-settings .notify .notification {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ec5252;
    position: absolute;
    right: 1px;
    border: 1px solid var(--theme-bg);
    top: -2px;
}
@media screen and (max-width: 575px) {
    .user-settings .notify .notification {
        display: none;
    }
}
.user-img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}
.user-name {
    color: #fff;
    font-size: 14px;
    margin: 0 6px 0 12px;
}
@media screen and (max-width: 575px) {
    .user-name {
        display: none;
    }
}
/*#endregion user */

.anim {
    -webkit-animation: bottom 0.8s var(--delay) both;
    animation: bottom 0.8s var(--delay) both;
}

/*#region author */
.author-img {
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    padding: 4px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}
.author-img__wrapper {
    position: relative;
    flex-shrink: 0;
}
.author-img__wrapper svg {
    width: 16px;
    padding: 2px;
    background-color: #fff;
    color: #0daabc;
    border-radius: 50%;
    border: 2px solid #0daabc;
    position: absolute;
    bottom: 5px;
    right: 0;
}
.author-name {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 8px;
}
.author-info {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
}
.author-detail {
    margin-left: 16px;
}
/*#endregion author */

.seperate {
    width: 3px;
    height: 3px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 6px;
}
.seperate.video-seperate {
    background-color: var(--body-color);
}
.articles {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    /*grid-template-columns: repeat(4, 1fr);*/
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
@media (min-width: 568px) and (max-width: 980px) {
    .articles {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 300px) and (max-width: 567.98px) {
    .articles {
        grid-template-columns: repeat(1, 1fr);
    }
}
.videos {
    width: 100%;
}
.video {
    position: relative;
    background-color: var(--video-bg-white-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    transition: 0.4s;
}
.video-wrapper {
    position: relative;
}
.video-name {
    color: var(--blog-text-dark);
    overflow: hidden;
    z-index: 9;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.video-view {
    position: relative;
}
.video-by {
    transition: 0.3s;
    display: flex;
    justify-content: flex-start;
    position: relative;
    width: 100%;
}
.video-by-wrapper {
    align-items: center;
    display: inline-flex;
}
.video-by-status {
    margin-left: 6px;
    content: "";
    background-color: #22b07d;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.video-by-status.status-offline {
    background-color: #ff7551;
}
.video-time {
    position: absolute;
    background: rgba(21, 13, 13, 0.44);
    color: rgba(255, 255, 255, 0.85);
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 6px;
    top: 10px;
    z-index: 101;
    right: 8px;
}
.video:hover video {
    transform: scale(1.7);
    transform-origin: center;
}
.video:hover .video-time {
    display: none;
}
.video:hover .video-author {
    bottom: -56px;
    transform: scale(0.6);
    right: -3px;
    z-index: 10;
}
.video-author {
    position: absolute;
    right: 10px;
    transition: 0.4s;
    bottom: -25px;
    z-index: 103;
}
.video-author svg {
    background-color: #0aa0f7;
    color: #fff;
    border-color: var(--video-bg-dark);
}

video {
    max-width: 100%;
    width: 100%;
    transform: scale(1);
    border-radius: 20px 20px 0 0;
    display: block;
    cursor: pointer;
    transition: all 0.4s;
}
.video-descriptions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}
.video-descriptions.video-descriptions-bg-white {
    background-color: var(--video-bg-white);
}
.video-descriptions.video-descriptions-bg-white-secondary {
    background-color: var(--video-bg-white-secondary);
}
.blog-list-youtube-container {
    max-width: 100%;
    width: 100%;
    transform: scale(1);
    border-radius: 20px 20px 0 0;
    display: block;
    cursor: pointer;
    transition: all 0.4s;
}
.video-p {
    margin-right: 12px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
    position: relative;
    top: 0;
    left: 0;
}
.video-p .author-img {
    border: 0;
}
.video-p-sub {
    font-size: 12px;
}
.video-p-title {
    font-size: 24px;
    color: #fff;
    line-height: 1.4em;
    margin: 16px 0 20px;
}
.video-p-subtitle {
    font-size: 14px;
    line-height: 1.5em;
    max-width: 60ch;
}
.video-p-subtitle + .video-p-subtitle {
    margin-top: 16px;
}

.button-wrapper {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.main-blog-container {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    padding: 0 30px 30px;
    flex-grow: 1;
    overflow: auto;
}

@media screen and (max-width: 735px) {
    .videos,
    .articles {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 475px) {
    .author-name {
        font-size: 14px;
    }
    .author-detail {
        margin-left: 0;
    }
    .blog-header {
        padding: 20px;
    }
    .sidebar {
        align-items: center;
    }
}

.filtersDesktop-filters-search-item-description.filtersDesktop-filters-search-item-description.filtersDesktop-filters-blog {
    -webkit-line-clamp: 3;
}
/*#region blog list */
.blog-list-youtube-container {
    padding: 0px;
}
.blog-list-youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.blog-list-youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*#endregion blog list */

/*#region article */
.article-wrapper {
    position: relative;
}
.article-descriptions-container {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 16px 16px;
    width: 100%;
}
.article-descriptions-wrapper {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 2px;
    width: 100%;
}
.article-name-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}
.article-name .article-name-description a {
    color: var(--blog-text-dark);
}
.article-name {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
}
.article-name-link,
.article-by-link {
    color: var(--mainTxtColor);
}
.article-comments {
    display: flex;
    align-items: center;
    background-color: var(--video-bg-white);
    position: relative;
    padding-top: 4px;
}
.article-by {
    transition: 0.3s;
    display: inline-flex;
    position: relative;
    margin-bottom: 4px;
}
.article-time {
    position: absolute;
    background: rgba(21, 13, 13, 0.44);
    color: rgba(255, 255, 255, 0.85);
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 6px;
    top: 10px;
    left: 8px;
}
.article-share {
    position: absolute;
    background: rgba(110, 95, 95, 0.44);
    color: rgba(255, 255, 255, 0.85);
    bottom: 10px;
    right: 8px;
}
.article-img {
    max-width: 100%;
    width: 100%;
    transform: scale(1);
    border-radius: 20px 20px 0 0;
    display: block;
    cursor: pointer;
    transition: all 0.4s;
}
.article-img img {
    transform: scale(1);
    transform-origin: center;
    transition: all 0.4s;
}
.article-img:hover img {
    transform: scale(1.6);
    transform-origin: center;
    transition: all 0.4s;
}
.article-item {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
}
.article-item:hover .article-author {
    bottom: -56px;
    transform: scale(0.6);
    right: -3px;
    z-index: 10;
}
.article-author {
    position: absolute;
    right: 30px;
    transition: 0.4s;
    bottom: 25px;
    z-index: 103;
}
.article-author svg {
    background-color: #0aa0f7;
    color: #fff;
    border-color: var(--video-bg-dark);
}
.product-item-img img {
    transform: scale(1);
    transform-origin: center;
    transition: all 0.3s;
}
/*
.article-item:hover .article-time {
    display: none;
}
*/
.article-item:hover .article-author {
    bottom: -50px;
    transform: scale(0.6);
    right: 10px;
    z-index: 10;
}
/*#endregion article */

/*#region cms-blog (blog info) */
.cms-blog-container {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-bottom: var(--gap);
    min-width: 0;
}
.cms-blog-info-section {
    background-color: #fff;
    border-radius: 2px;
    position: relative;
    width: 100%;
}
.cms-blog-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cms-blog-info-wrapper article {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cms-blog-container p a:hover {
    opacity: 0.7;
}
.cms-blog-container .header-general-container {
    margin-bottom: 0px;
}
.cms-blog-container h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 26px;
    padding: 20px 0 5px;
}
.cms-blog-container h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 24px;
    padding: 16px 0 5px;
}
.cms-blog-container h4 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 20px;
}
.cms-blog-container h5 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 16px;
}
.cms-blog-container p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-align: justify;
}
.cms-blog-container .article-tag-container {
    color: var(--color-primary);
    font-size: 14px;
    line-height: 1.29;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 18px;
    min-height: 38px;
}
.cms-blog-container .article-tag-container a {
    align-items: center;
    background: var(--color-white-light-gray);
    border-radius: 16px;
    box-sizing: border-box;
    color: var(--color-black);
    display: flex;
    flex: 0 0 auto;
    font-size: 14px;
    height: 32px;
    margin: 0 6px 6px 0;
    padding: 6px 16px;
    margin-top: 14px;
}
.cms-blog-container .article-tag-container a:hover {
    color: var(--color-primary);
}
.cms-blog-container .article-tag-container a:active,
.cms-blog-container .article-tag-container a:focus,
.cms-blog-container .article-tag-container a:hover {
    background: #e2e7ec;
    cursor: pointer;
}
.cms-blog-container ul {
    display: block;
    padding: 10px 20px;
    margin-left: 40px;
}
.cms-blog-container ul li {
    display: block;
    position: relative;
    font-size: 16px;
    line-height: 24px;
}
.cms-blog-container ol:not(.breadcrumb) {
    display: block;
    --counter-name: counts;
    font-size: inherit;
    counter-reset: var(--counter-name);
    list-style: none;
    padding: 10px 20px;
    margin-left: 40px;
}
.cms-blog-container ol:not(.breadcrumb-item) li {
    display: block;
    position: relative;
    counter-increment: var(--counter-name);
    font-size: 16px;
    line-height: 24px;
}
.cms-blog-container ol:not(.breadcrumb-item) li:before {
    position: absolute;
    content: counters(var(--counter-name), ".") ". ";
    font-feature-settings: "tnum";
    color: var(--color-dark-light);
    top: 1.1em;
    left: -25px;
    margin-top: -1.1em;
    font-weight: 600;
}
.cms-blog-container ul li:not(:last-child),
.cms-blog-container ol:not(.breadcrumb) li:not(:last-child) {
    margin-bottom: 16px;
}
.cms-blog-container ul li:before {
    content: "";
    position: absolute;
    top: 1.48em;
    left: -25px;
    margin-top: -1.1em;
    background: var(--color-dark-light);
    height: 10px;
    width: 10px;
    border-radius: 50%;
}
.cms-blog-container ol ul {
    padding: 0px 4px 8px !important;
}
.cms-blog-container ol ul li {
    counter-increment: none !important;
}
.cms-blog-container ol ul li:before {
    content: "" !important;
    counter-increment: none !important;
    top: 1.43em !important;
    left: 0;
    margin-top: 0;
}
.cms-blog-container h2 span {
    padding: 6px 12px;
}
.cms-blog-info-img {
    max-width: 890px;
    margin: 0 auto;
    padding: 24px 0;
}
/*
.cms-blog-info-img.cms-blog-info-img-group
{
    max-width: 100%;
}
*/
.cms-blog-info-img img {
    max-height: 550px;
    border-radius: 16px;
    background: #fff;
    box-sizing: initial;
    color: #1b1b1b;
    display: flex;
    height: auto;
    margin: 1.3rem auto;
}
.cms-blog-info-img .cms-blog-info-img-double-group,
.cms-blog-info-img .cms-blog-info-img-triple-group,
.cms-blog-info-img .cms-blog-info-img-quadruple-group {
    display: flex;
    flex-direction: row;
    column-gap: 24px;
    padding: 24px 0;
}
.cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-double-group img {
    border-radius: 16px;
    width: 49.5%;
}
.cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-triple-group img {
    border-radius: 16px;
    width: 32.3%;
}
@media screen and (max-width: 767px) {
    .cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-double-group {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }
    .cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-double-group img {
        width: 100%;
    }
}
@media screen and (max-width: 991px) {
    .cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-triple-group {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }
    .cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-triple-group img {
        width: 100%;
    }
}
.cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-quadruple-group-item {
    display: flex;
    flex-direction: row;
    column-gap: 24px;
    width: 50%;
}
.cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img .cms-blog-info-img-quadruple-group img {
    border-radius: 16px;
    width: 49.5%;
}
@media screen and (max-width: 767px) {
    .cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-quadruple-group-item {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }
    .cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-quadruple-group-item img {
        width: 100%;
    }
}
@media screen and (max-width: 1219px) {
    .cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-quadruple-group {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }
    .cms-blog-info-img.cms-blog-info-img-group .cms-blog-info-img-quadruple-group-item {
        width: 100%;
    }
}
.cms-blog-info-youtube-container {
    padding: 24px 0;
    max-width: 890px;
    width: 100%;
    margin: 0 auto;
}
.cms-blog-info-youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 12px;
    overflow: hidden;
}
.cms-blog-info-youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.cms-blog-info-copyright-link
{
    padding-top: 0px;
}
/*#endregion cms-blog (blog info) */

/*#region blog quotes */
.cms-blog-container .quotes-wrapper {
    position: relative;
    background: rgba(130, 139, 178, 0.05);
    padding: 16px;
    line-height: 1.733;
    font-style: italic;
    margin: 25px 0;
    border-radius: 12px;
}

@media (min-width: 768px) {
    .cms-blog-container .quotes-wrapper {
        padding: 35px;
    }
}
.cms-blog-container .quotes.quotes-default {
    background: #fff;
    padding: 15px 15px 15px 20px;
    border-left: 2px solid;
}

.cms-blog-container .quotes.quotes-info {
    border-left: 2px solid #2196f3;
}

.cms-blog-container .quotes.quotes-danger {
    border-left: 2px solid #db2b42;
}

@media (min-width: 768px) {
    .cms-blog-container .quotes {
        padding: 25px 25px 25px 30px;
    }
}
@media (max-width: 767px) {
    .cms-blog-container .quotes {
        padding: 25px 20px 25px 20px;
    }
}
/*#endregion blog quotes */

/*#region youTube */
iframe[src*="youtube"][width="-1"] {
    width: 890px;
}
iframe[src*="youtube"][height="-1"] {
    height: 490px;
}
/*#endregion youTube */

/*#region table */
.table-wrapper {
    overflow-x: auto;
}
.table-wrapper table {
    white-space: nowrap;
}

table {
    width: 100%;
    border: none;
    margin-bottom: 20px;
}
table thead th {
    border: none;
    min-width: 80px;
    position: relative;
    text-align: left;
    vertical-align: middle;
    padding: 24px;
    background-color: #ebf7ff;
    color: #001a34;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
}
table thead tr th:first-child {
    border-radius: 8px 0 0 8px;
    padding-left: 12px;
}
table thead tr th:last-child {
    border-radius: 0 8px 8px 0;
    padding-left: 12px;
}
table tbody td {
    text-align: left;
    border: none;
    padding: 24px;
    font-size: 14px;
    vertical-align: middle;
}
table tbody tr:nth-child(even) {
    background: #f2f5f9;
}
table tbody tr td:first-child {
    border-radius: 8px 0 0 8px;
}
table tbody tr td:last-child {
    border-radius: 0 8px 8px 0;
}
/*#endregion table */

.blog-left-menu {
    max-width: 220px;
    flex-basis: 220px;
}

/*#region mobile vs tablet */
.mobile .cms-blog-container {
    margin-left: 0px;
}
.mobile .layout-grid-row .blog-left-menu,
.tablet .layout-grid-row .blog-left-menu {
    display: none;
}
.mobile .left-menu-wrapper .stickyContainer-blog-list,
.tablet .left-menu-wrapper .stickyContainer-blog-list {
    display: contents;
}
.mobile .blog-left-menu,
.tablet .blog-left-menu {
    max-width: calc(100% - 2 * var(--gap));
    flex-basis: calc(100% - 2 * var(--gap));
    width: calc(100% - 2 * var(--gap));
}
.mobile .cms-blog-container ul,
.mobile .cms-blog-container ol {
    padding: 10px 20px;
    margin-left: 20px;
}
.tablet .cms-blog-container ul,
.tablet .cms-blog-container ol {
    padding: 10px 20px;
    margin-left: 30px;
}
.mobile .cms-blog-info-img,
.tablet .cms-blog-info-img {
    padding: 12px 0;
}
/*#endregion mobile vs tablet */

/*#region quotes */
.blockquote-section {
    width: 100%;
    max-width: 890px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.blockquote-section blockquote.quote {
    position: relative;
    text-align: center;
    padding: 1rem 1.2rem;
    width: 80%; /* create space for the quotes */
    color: #484748;
    margin: 1rem auto 2rem;
    font-size: 18px;
    line-height: 26px;
}
.blockquote-section blockquote.quote-default {
    background: linear-gradient(to right, #039be5 4px, transparent 4px) 0 100%, linear-gradient(to left, #039be5 4px, transparent 4px) 100% 0, linear-gradient(to bottom, #039be5 4px, transparent 4px) 100% 0, linear-gradient(to top, #039be5 4px, transparent 4px) 0 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.blockquote-section blockquote.quote-reverse {
    background: linear-gradient(to right, #039be5 4px, transparent 4px) 0% 0%, linear-gradient(to bottom, #039be5 4px, transparent 4px) 0% 0%, linear-gradient(to left, #039be5 4px, transparent 4px) 100% 100%, linear-gradient(to top, #039be5 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

/* -- create the quotation marks -- */
.blockquote-section blockquote.quote:before,
.blockquote-section blockquote.quote:after {
    font-family: FontAwesome;
    position: absolute;
    color: #039be5;
    font-size: 34px;
}

.blockquote-section blockquote.quote-default:before {
    content: '\201C';
    font-size: 6em;
    top: 0px;
    margin-right: -20px;
    right: 100%;
}
.blockquote-section blockquote.quote-default:after {
    content: '\201D';
    font-size: 6em;
    margin-left: -20px;
    left: 100%;
    top: auto;
    bottom: -20px;
}
.blockquote-section blockquote.quote-reverse:before {
    content: '\201D';
    font-size: 6em;
    margin-right: -20px;
    bottom: -20px;
    right: 100%;
}
.blockquote-section blockquote.quote-reverse:after {
    content: '\201D';
    font-size: 6em;
    margin-left: -20px;
    left: 100%;
    top: 0;
    bottom: auto;
}

.blockquote-two-line {
    position: relative;
    font-size: 1.5em;
    line-height: 1.6em;
}
.blockquote-two-line cite {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    float: right;
}
.blockquote-two-line cite:before {
    content: "\2015"" ";
}
.blockquote-two-line:after {
    content: "\201d";
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 6em;
    font-style: italic;
    color: #bdbec0;
}
.blockquote-sidekick {
    position: relative;
    padding-left: 1em;
    border-left: 0.2em solid #039be5;
    font-weight: 100;
    font-size: 1.5em;
    line-height: 1.6em;
}
.blockquote-sidekick:before,
.blockquote-sidekick:after {
    font-family: Calibri;
    color: #039be5;
    font-size: 34px;
}
.blockquote-sidekick:before {
    content: "\201e";
}
.blockquote-sidekick:after {
    content: "\201c";
}
.blockquote-sidekick cite {
    font-size: 80%;
    text-align: center;
    top: 50%;
}
.blockquote-sidekick cite:before {
    content: " \2015 ";
}
/*#endregion quotes */

/*#region constructor */
.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.article-help-card-header {
    margin-bottom: 2rem;
    border-radius: 6px;
}

.article-help-container {
    overflow-wrap: break-word;
}

.article-help-header-h2,
.article-help-header-h3,
.article-help-header-h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

.article-help-header-h2,
.article-help-header-h3 {
    font-weight: 700;
}

.article-help-header-h4 {
    font: var(--type-heading-h4);
    letter-spacing: 0.5px;
    margin: 2rem 0 1rem;
}

.article-help-header-h2 {
    font-size: calc(1.2875rem + 0.45vw);
}

@media (min-width: 1200px) {
    .article-help-header-h2 {
        font-size: 1.625rem;
    }
}

.example-text {
    text-decoration: none;
    color: rgba(var(--bs-link-color-rgb));
}

.token.boolean,
.token.char,
.token.constant,
.token.deleted,
.token.number,
.token.string,
.token.symbol,
.token.tag {
    color: var(--code-token-attribute-value);
}
.token.attr-name,
.token.builtin,
.token.class-name,
.token.function,
.token.inserted,
.token.property,
.token.selector {
    color: var(--code-token-attribute-name);
}
.token.punctuation {
    color: var(--code-token-punctuation);
}

/*#region Hamburger */
.hamburger-container {
    left: 5px;
    width: 100%;
    top: 7px;
    position: absolute;
}
/* Icon 1 */

#nav-icon1,
#nav-icon2,
.nav-icon3,
#nav-icon4 {
    width: 50px;
    height: 50px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

#nav-icon1 span,
.nav-icon3 span,
#nav-icon4 span {
    display: block;
    position: absolute;
    height: 5px;
    width: 80%;
    background: #fff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
    top: 0px;
}

#nav-icon1 span:nth-child(2) {
    top: 18px;
}

#nav-icon1 span:nth-child(3) {
    top: 36px;
}

#nav-icon1.open span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

#nav-icon1.open span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/* Icon 2 */

#nav-icon2 {
}

#nav-icon2 span {
    display: block;
    position: absolute;
    height: 9px;
    width: 50%;
    background: #d3531a;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
    left: 50%;
    border-radius: 0 9px 9px 0;
}

#nav-icon2 span:nth-child(odd) {
    left: 0px;
    border-radius: 9px 0 0 9px;
}

#nav-icon2 span:nth-child(1),
#nav-icon2 span:nth-child(2) {
    top: 0px;
}

#nav-icon2 span:nth-child(3),
#nav-icon2 span:nth-child(4) {
    top: 18px;
}

#nav-icon2 span:nth-child(5),
#nav-icon2 span:nth-child(6) {
    top: 36px;
}

#nav-icon2.open span:nth-child(1),
#nav-icon2.open span:nth-child(6) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2),
#nav-icon2.open span:nth-child(5) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {
    left: 5px;
    top: 7px;
}

#nav-icon2.open span:nth-child(2) {
    left: calc(50% - 5px);
    top: 7px;
}

#nav-icon2.open span:nth-child(3) {
    left: -50%;
    opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
    left: 100%;
    opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
    left: 5px;
    top: 29px;
}

#nav-icon2.open span:nth-child(6) {
    left: calc(50% - 5px);
    top: 29px;
}

/* Icon 3 */

.nav-icon3 span:nth-child(1) {
    top: 0px;
}

.nav-icon3 span:nth-child(2),
.nav-icon3 span:nth-child(3) {
    top: 14px;
}

.nav-icon3 span:nth-child(4) {
    top: 28px;
}

.nav-icon3.open span:nth-child(1) {
    top: 14px;
    width: 0%;
    left: 50%;
}

.nav-icon3.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-icon3.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.nav-icon3.open span:nth-child(4) {
    top: 14px;
    width: 0%;
    left: 50%;
}

/* Icon 4 */

#nav-icon4 {
}

#nav-icon4 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
    top: 18px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
    top: 36px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -3px;
    left: 8px;
}

#nav-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 39px;
    left: 8px;
}
/*#endregion Hamburger */

/* Modal For Help Images */
.myHelpImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myHelpImg:hover {
    opacity: 0.7;
}

/* The Modal (background) */
.modal-help {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.55); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-help-content {
    margin: auto;
    display: block;
    width: 95%;
    max-width: 1200px;
}

/* Caption of Modal Image */
#caption-help {
    margin: auto;
    display: block;
    width: 95%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-help-content,
#caption-help {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

/* The Close Button */
.close-help {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close-help:hover,
.close-help:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/* Close img help modal */
.modal-close {
    opacity: 1 !important;
    width: 42px;
    height: 42px;
    padding-top: 4px;
    position: absolute;
    top: 41px;
    right: 41px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    border-radius: 100%;
    background: transparent;
    border: solid 4px #fafafa;
    transition: all 0.3s ease 0s;
}
.modal-close:after,
.modal-close:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 6px;
    height: 4px;
    width: 22px;
    border-radius: 30px;
    background: #fafafa;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.modal-close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.modal-close:hover {
    -webkit-transform: translate(50%, -50%) rotate(180deg);
    transform: translate(50%, -50%) rotate(180deg);
    background: #fafafa;
    text-decoration: none;
    border-color: rgba(217, 83, 79, 0.1);
}
.modal-close:hover:after,
.modal-close:hover:before {
    background: #dc3545;
}

/* (A) LIGHTBOX BACKGROUND */
#lightbox {
    /* (A1) COVERS FULLSCREEN */
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    /* (A2) BACKGROUND */
    background: rgba(0, 0, 0, 0.5);

    /* (A3) CENTER IMAGE ON SCREEN */
    display: flex;
    align-items: center;
    align-items: center;

    /* (A4) HIDDEN BY DEFAULT */
    visibility: hidden;
    opacity: 0;

    /* (A5) SHOW/HIDE ANIMATION */
    transition: opacity ease 0.4s;
}

/* (A6) TOGGLE VISIBILITY */
#lightbox.show {
    visibility: visible;
    opacity: 1;
}

/* (B) LIGHTBOX IMAGE */
#lightbox img {
    /* (B1) DIMENSIONS */
    width: 100%;
    height: auto;
    object-fit: cover;
}

/*#region alerts */
.ui-alert {
    width: 100%;
    margin: 12px 0;
}
.ui-alert .ui-alert-text
{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-align: justify;
    word-wrap: break-word;
    padding: 24px 12px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.ui-alert .javascript {
    display: table-cell;
    width: 100%;
    padding: 10px;
}
.ui-alert.ui-alert-danger {
    border-left: var(--alert-left-border-width) solid red;
}
.ui-alert.ui-alert-danger .ui-alert-text{
    background-color: rgba(255, 0, 0, .05);
}
.ui-alert.ui-alert-danger code.javascript  {
    color: #e93219;
}
.ui-alert.ui-alert-success {
    border-left: var(--alert-left-border-width) solid #007936;
}
.ui-alert.ui-alert-success .ui-alert-text{
    background-color: rgba(0, 255, 0, .05);
}
.ui-alert.ui-alert-success code.javascript {
    color: #007936;
}
.ui-alert.ui-alert-info {
    border-left: var(--alert-left-border-width) solid #1e91cf;
}
.ui-alert.ui-alert-info .ui-alert-text{
    background-color: rgba(0, 0, 255, .05);
}
.ui-alert.ui-alert-info code.javascript {
    color: #1e91cf;
}
.ui-alert.ui-alert-warning {
    border-left: var(--alert-left-border-width) solid rgba(247, 147, 0, 1);
}
.ui-alert.ui-alert-warning .ui-alert-text{
    background-color: rgba(255, 255, 0, .11);
}
.ui-alert.ui-alert-warning code.javascript {
    color: rgba(247, 147, 0, 1);
}
/*#endregion alerts */

.ui-visually-hidden {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

#overlay {
    pointer-events: none;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#overlay.open {
    pointer-events: all;
    opacity: 1;
}

#menu {
    opacity: 0.35;
    color: #fff;
    background: rgba(52, 58, 64, 0.8);
    z-index: 3;
    cursor: pointer;
    position: fixed;
    top: 90px;
    left: 0;
    font-size: 1.5rem;
    padding: 1rem 1.2rem 1rem 1rem;
    /*border-bottom-right-radius: 30%;*/
    /*box-shadow: 3px 3px 10px rgba(220, 20, 60, 0.12), -3px 3px 10px rgba(220, 20, 60, 0.12), 3px -3px 10px rgba(220, 20, 60, 0.12);*/
    box-shadow: 3px 3px 10px rgba(225, 225, 225, 0.12), -3px 3px 10px rgba(225, 225, 225, 0.12), 3px -3px 10px rgba(225, 225, 225, 0.12);
    transition: all 0.2s ease-in-out;
}

#menu:hover {
    opacity: 1;
    background: #fe0c0c;
}

#menu.open {
    left: 250px;
    color: crimson;
    background: #fff;
    color: #fff;
    background: #343a40;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

@media screen and (min-width: 769px) {
    #overlay {
        display: none;
    }

    #menu {
        display: none;
    }
}

.main-wrapper {
    display: flex;
    margin: 0 auto;
    width: 100%;
}
@media (min-width: 769px) {
    .main-wrapper {
        display: grid;
        grid-gap: 3rem;
        gap: 3rem;
        grid-template-areas: "sidebar main";
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}
@media (min-width: 1200px) {
    .main-wrapper {
        display: grid;
        grid-gap: 3rem;
        gap: 3rem;
        grid-template-areas: "sidebar main toc";
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 12.5rem);
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
@media (min-width: 769px) and (min-height: 44rem) {
    .main-wrapper .sidebar-container {
        display: flex;
        flex-direction: column;
    }
}
@media (min-width: 1200px) {
    .main-wrapper .sidebar-container {
        display: contents;
    }
}
.main-wrapper .sidebar-container {
    --offset: var(--sticky-header-with-actions-height);
    --max-height: calc(100vh - var(--offset));
    max-height: var(--max-height);
    position: -webkit-sticky;
    position: sticky;
    top: var(--offset);
    z-index: var(--z-index-sidebar-mobile);
}

@media (min-width: 1200px) {
    .main-wrapper .sidebar-container .toc-container,
    .main-wrapper .sidebar-container.toc-container {
        display: flex;
        flex-direction: column;
        gap: 0;
        height: calc(100vh - var(--offset));
        -webkit-mask-image: linear-gradient(180deg, #0000 0, #000 3rem calc(100% - 3rem), #0000);
        mask-image: linear-gradient(180deg, #0000 0, #000 3rem calc(100% - 3rem), #0000);
        overflow: auto;
        position: -webkit-sticky;
        position: sticky;
        top: var(--offset);
    }
}
.main-wrapper .sidebar {
    all: unset;
}
.main-wrapper .sidebar {
    display: flex;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 3rem;
    padding-right: 0.5rem;
    flex-direction: column;
    width: 100%;
}
@media (min-width: 769px) {
    .main-wrapper .sidebar {
        align-self: start;
        grid-area: sidebar;
        padding-top: unset;
    }
}
@media (max-width: 768px) {
    .main-wrapper .sidebar {
        height: 100vh;
        left: 0;
        max-height: 100vh;
        position: fixed;
        right: 0;
        top: var(--offset);
        transform: translateX(-100%);
    }
}
@media (min-width: 1200px) {
    .main-wrapper .sidebar {
        max-height: var(--max-height);
        position: -webkit-sticky;
        position: sticky;
        top: var(--offset);
    }
}
@media (min-height: 44rem), (min-width: 992px) {
    .main-wrapper .sidebar {
        display: block;
        overflow: auto;
    }
}
.main-wrapper .sidebar .sidebar-inner {
    min-height: 20vh;
}
@media (max-width: 768px) and (min-height: 44rem) {
    .main-wrapper .sidebar .sidebar-inner {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}
@media (max-width: 768px) {
    .main-wrapper .sidebar .sidebar-inner {
        background: var(--background-primary);
        border-right: 1px solid var(--border-primary);
        display: grid;
        height: var(--max-height);
        max-height: var(--max-height);
        max-width: 20rem;
        overflow: hidden;
        overflow: auto;
        padding: 1rem;
        position: relative;
        transform: translateX(-100%);
        transition: transform 0.2s linear;
        width: 80vw;
        will-change: transform;
    }
}
.main-wrapper .sidebar .sidebar-actions {
    height: 0;
    padding-bottom: 4rem;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: var(--z-index-main-header);
}
/*
.sidebar-filter-container {
    padding: 0 10px 0 0;
}
*/
.main-wrapper .sidebar .sidebar-actions ~ .sidebar-inner-nav {
    margin-top: 1.5rem;
}
.sidebar-filter-container {
    background: linear-gradient(to bottom, var(--background-primary) 0 calc(100% - 2rem), #0000 100%);
    display: flex;
    flex-direction: column;
    font-size: var(--type-smaller-font-size);
    padding-bottom: 1.37rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
}
.sidebar-filter-container .sidebar-filter {
    margin-bottom: 0.5rem;
}
.main-wrapper .main-content {
    display: flex;
    min-height: 80vh;
    flex-direction: column;
    width: 100%;
}
@media (min-width: 769px) {
    .main-wrapper .main-content {
        grid-area: main;
    }
}
.main-wrapper .toc {
    display: none;
}
@media (min-width: 769px) {
    .main-wrapper .main-content,
    .main-wrapper .sidebar,
    .main-wrapper .toc {
        padding-bottom: 3rem;
    }
}
@media (min-width: 1200px) {
    .main-wrapper .toc {
        --offset: var(--sticky-header-with-actions-height);
        display: block;
        grid-area: toc;
        height: -webkit-fit-content;
        height: fit-content;
        padding-bottom: 0;
    }
}
.main-wrapper .article-actions-container,
.main-wrapper .document-toc-container,
.main-wrapper .generic-loading,
.main-wrapper .main-content,
.main-wrapper .metadata,
.main-wrapper .page-header,
.main-wrapper .sidebar {
    display: flex;
}
@media (min-width: 1200px) {
    .main-wrapper .toc {
        --offset: var(--sticky-header-with-actions-height);
        display: block;
        grid-area: toc;
        height: -webkit-fit-content;
        height: fit-content;
        padding-bottom: 0;
    }
}
.document-toc {
    margin-bottom: 2rem;
    padding: 0;
}
.document-toc-heading.document-toc-heading {
    letter-spacing: 1.5px;
    margin: 0 0 1rem;
}
.document-toc-list.document-toc-list {
    font-size: var(--type-smaller-font-size);
    list-style: none !important;
    padding-left: 0;
}
.document-toc-list.document-toc-list li {
    margin: 0 !important;
}
.cms-blog-container .document-toc ul {
    padding: 0;
    margin: 0;
}
.cms-blog-container .document-toc ul li:before {
    content: "";
    position: absolute;
    display: none;
}
.cms-blog-container .document-toc-link.document-toc-link:not(.button):hover {
    color: var(--text-link);
}
.cms-blog-container .document-toc-link.document-toc-link:not(.button) {
    border-left: 2px solid var(--border-secondary);
    color: var(--text-secondary);
    display: inline-block;
    padding: 0.5rem 1rem;
    text-decoration: none;
}
/*#region MAIN */
/* MAIN */
section {
    position: relative;
    padding: 3rem 0;
}

main section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(220, 20, 60, 0.3), crimson, rgba(220, 20, 60, 0.3));
}

.sticky-block {
    position: sticky;
    top: 125px;
    bottom: 15px;
}
/*#endregion MAIN */

/*#region navbar */
#navbar {
    font-size: 1rem !important;
    padding-top: 140px;
    z-index: 2;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -310px;
    width: 300px;
    color: #fff;
    background: #343a40;
    overflow: auto;
    transition: left 0.2s ease-in-out;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

#navbar.open {
    left: 0;
}

#navbar section {
    padding: 0;
}

#navbar a {
    display: block;
    color: #fff;
    padding: 1.5rem;
}

#navbar a:hover {
    opacity: 1;
    background: #f0f0f0;
    color: crimson;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#navbar a.selected {
    opacity: 1;
    background: #fff;
    color: crimson;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
/*#endregion navbar */

/*#region ui-navbar */
.ui-navbar.open {
    left: 0;
}

.ui-navbar section.nav-link-filter {
    padding: 0;
}

.ui-navbar a {
    display: block;
    color: #343a40;
    padding: 12px 12px;
    font-size: 16px;
}

.ui-navbar a:hover {
    opacity: 1;
    background: #f0f0f0;
    border-radius: 6px;
    color: crimson;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.ui-navbar a.selected {
    opacity: 1;
    background: #fff;
    color: crimson;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
/*#endregion navbar */

/*#region FOOTER */
footer section::after {
    background: none;
}
/*#endregion FOOTER */

/* Modal For Help Images */
.myHelpImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myHelpImg:hover {
    opacity: 0.7;
}

/* The Modal (background) */
.modal-help {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.55); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-help-content {
    margin: auto;
    display: block;
    width: 95%;
    max-width: 1200px;
}

/* Caption of Modal Image */
#caption-help {
    margin: auto;
    display: block;
    width: 95%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-help-content,
#caption-help {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

/* The Close Button */
.close-help {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close-help:hover,
.close-help:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/* Close img help modal */
.modal-close {
    opacity: 1 !important;
    width: 42px;
    height: 42px;
    padding-top: 4px;
    position: absolute;
    top: 41px;
    right: 41px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    border-radius: 100%;
    background: transparent;
    border: solid 4px #fafafa;
    transition: all 0.3s ease 0s;
}
.modal-close:after,
.modal-close:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 6px;
    height: 4px;
    width: 22px;
    border-radius: 30px;
    background: #fafafa;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.modal-close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.modal-close:hover {
    -webkit-transform: translate(50%, -50%) rotate(180deg);
    transform: translate(50%, -50%) rotate(180deg);
    background: #fafafa;
    text-decoration: none;
    border-color: rgba(217, 83, 79, 0.1);
}
.modal-close:hover:after,
.modal-close:hover:before {
    background: #dc3545;
}

/* (A) LIGHTBOX BACKGROUND */
#lightbox {
    /* (A1) COVERS FULLSCREEN */
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    /* (A2) BACKGROUND */
    background: rgba(0, 0, 0, 0.5);

    /* (A3) CENTER IMAGE ON SCREEN */
    display: flex;
    align-items: center;
    align-items: center;

    /* (A4) HIDDEN BY DEFAULT */
    visibility: hidden;
    opacity: 0;

    /* (A5) SHOW/HIDE ANIMATION */
    transition: opacity ease 0.4s;
}

/* (A6) TOGGLE VISIBILITY */
#lightbox.show {
    visibility: visible;
    opacity: 1;
}

/* (B) LIGHTBOX IMAGE */
#lightbox img {
    /* (B1) DIMENSIONS */
    width: 100%;
    height: auto;

    /* (B2) IMAGE FIT */
    /* contain | cover | fill | scale-down */
    object-fit: cover;
}

/* (C) LIGHTBOX IMAGE - FULLSCREEN ALTERNATIVE **/
/*
#lightbox img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
*/

/*#endregion constructor */