:root {
    /* background */
    --controls-accent-bg-color: #3d528f;
    --controls-accent-bg-light: #f4f6fb;
    --control-color: #4f5d93;
    --control-alt-color:#4F5D8930;
    /* links */
    --link-color: #7a8aff;
    --link-color-dark: hsl(233, 59%, 52%);
    /* text */
    --text-section: #FFFFFF;
    --text-color: #272D37;
    --text-color-light: #5F6D7E;
    --breadcrumbs-color: #d4d4d4;
    --breadcrumbs-active-color: #ffffff;
    --breadcrumbs-color-hover: #4ed7fa;
    --allert-color: #ff4444;
    --light-beige: #f5d9c6;
}


* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

a, a:hover {text-decoration:none;}

button {-webkit-appearance: none;
    outline: none;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

ol, ul {
    list-style: none;
}


html {
    font-size: 16px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #FFFFFF;
}


.lnd-header {
    background-color: #000000;
    height: 60px;
    width: 100%;
    top: 0;
    position: fixed;
}


.gotop {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    background-color: var(--controls-accent-bg-color);
    width: 3rem;
    height: 3rem;
    border: solid 0.1rem #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition-property: opacity, visibility;
    transition-duration: .3s, 0s;
    transition-delay: 0s, .3s;
    z-index: 99;
}

.gotop--visible {
    visibility: visible;
    opacity: 1; 
    transition-delay: 0s, 0s;
}


.gotop__icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: white;
}

.section {
    margin-top: 4rem;
    padding: 4rem 0;
}

.section--noindent {
    margin-top: 0rem;
}

.section--xs-padding {
    padding: 1rem 0;
}

.section--bg {
    background-color: #F8FBFF;
    padding: 6rem 0;
}

.section--bg-important {
    background-color: #F8FBFF !important;
}

.section-header {
    margin: 0 auto;
    margin-bottom: 3rem;
}

.section-header--indent {
    margin-top: 9rem;
}



.section-header__heading {
    font-family: 'Poppins','Inter', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #272D37;
    text-align: center;
    margin-bottom: 1rem;
}

.section-header__subheading {
    margin-top: 0.75rem;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.44;
    letter-spacing: -0.03em;
    color: #5F6D7E;
    text-align: center;
    margin: 0 auto;
}

.section-header__subheading > a {
color:var(--link-color-dark);
}

.lnd-wrap {
    margin-top:60px;
    max-width: 2000px;
    margin: 0 auto;
    /* padding-bottom: 6rem; */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    /* overflow: hidden; */
}

.family-header {
    background-color: var(--controls-accent-bg-color);
    padding: 2.5rem 0;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.family-header__columns {
    display: flex;
    padding: 1rem 0; /*fix breadcrumbs*/
    padding-bottom: 5rem;
}

.family-header__columns > div {
    flex: 1 0 50%;
}

.family-header__title {
    font-family: 'Poppins','Inter', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 4rem;
    line-height: 1.1;
    letter-spacing: -1px;
}

.family-header__title::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 6rem;
    height: 4.5rem;
    /* background: url(/img/fam/icons.svg#circles) 0 0 no-repeat; */
    background-size: contain;
    margin-left: 1rem;
  }

.family-header__features-box {
    display: flex;
    align-items: center;
    padding-left: 3rem;
    font-size: 1.125rem;
    color: #fff;
    font-weight: 500;
}

.family-header__features-box p {
    margin-bottom: 1rem;
}

.family-header__features-box p:last-child {
    margin-bottom: 0;
}

.family-header__features-box > ul li {
    margin-bottom: 1rem;
}

.family-header__features-box > ul  li:last-child {
    margin-bottom: 0;
}


.family-header__platforms {
    background-color: #fff;
    border-radius: 0.625rem;
    text-align: center;
    padding: 2rem;
    padding-bottom: 3rem;

} 

.family-header__platforms-heading {
    color:#595959;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.family-header__platforms-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;
    column-gap: 5rem;
}

.family-header__platforms-list > li {
    text-align: center;
    width: 18rem;
    border-radius: 0.375rem;;
}

.family-header__platforms-list > li > a {
    border-radius: 0.5rem;
    display: block;
    padding: 1rem; 
    transition: background-color 0.2s;
    position: relative;
}

.family-header__platforms-list > li > a:hover {
    background-color: var(--controls-accent-bg-light);
}

.family-header__platforms-list > li > a::after {
    content: "";
    position: absolute;
    right: -1rem;
    top: 1.7rem;
    height: 6em;
    width: 1px;
    background-color: transparent;

}

.family-header__platforms-list > li:last-child > a::after {
display: none;
}

.family-header__platform-heading {
    font-size: 3.875rem;
    font-family: 'Poppins','Inter', sans-serif;
    font-weight: 700;
    color:#7C7C7C;
    letter-spacing: -1px;
    margin-bottom: 0.6rem;
}

.family-header__platform-heading--blue {
    color: var(--controls-accent-bg-color);
}

.family-header__platform-heading--red {
    color: #FE5F55;
}
.family-header__platform-heading--green {
    color: #57AB64;
}

.family-header__platform-subheading {
    color:#333333;
    font-size:0.9rem;
}




/* actions */

.family-actions {
    background-color: var(--controls-accent-bg-color);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    padding: 3.5rem 2rem;
    /* background-image: url(/img/fam/bg.webp); */
}

.family-actions__heading {
    font-family: 'Poppins','Inter', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #fff;
   
    margin-bottom: 1rem;
}

.family-actions__subheading {
    margin-top: 0.75rem;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.4;
   color: #fff;
    margin: 0 auto;
    margin-bottom: 3rem;
}

.family-actions__subheading > p {
    margin-top: 1rem;
}

.family-actions__btns {
    display: flex;
    gap:1.4rem;
    justify-content: center;
    flex-wrap: wrap;
}

.family-actions__btn {
    display: block;
    border-radius: 0.375rem;
    padding: 0.9rem 1rem;
    text-align: center;
    font-weight: 600;
    background-color: var(--control-color);
    color:#fff;
    min-width: 5.625rem;
    border: solid 1px #ffffff;
    opacity: 0.9;
}

.family-actions__btn:hover {
    border-color: #cccccc;
    opacity: 1;
}

.family-actions__btn--alt {
    display: block;
    border-radius: 0.375rem;
    padding: 0.9rem 1rem;
    text-align: center;
    font-weight: 600;
    background-color: var(--control-alt-color);
    border: solid 1px var(--controls-accent-bg-color);
    color:var(--link-color-dark);
    min-width: 5.625rem;
}

.family-actions__btn--alt:hover {
    background-color: #ffffff;
}

.family-actions__btn--blue {
    background-color: #fff;
    color:var(--controls-accent-bg-color);
}

.family-actions__btn--red {
    background-color: #cf5952;
    color:#fff;
}

.family-actions__btn--green {
    background-color: #53835a;
    color:#fff;
}

.family-actions__btn--blue {
    background-color: #fff;
    color:var(--controls-accent-bg-color);
}

.family-actions__btn--orange {
    background-color: #e76f00;
    color: #ffffff;
}

.family-actions__btn--light {
    background-color: var(--controls-accent-bg-light);
    color:var(--controls-accent-bg-color);
}

.family-features__list {
    
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
    
}

.family-features__item {
    border:1px solid #EAEBF0;
    border-radius: 0.375rem;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:1rem;
    text-align: center;

}
.family-features__item-icon {
    width: 3rem;
    height:3rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5rem;
}

.family-features__item-icon img {
    width: 3rem;
    height:3rem;
}

.family-features__item-heading  {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--controls-accent-bg-color);
    letter-spacing: -0.3px;
}

.family-features__item-subheading  {
    color: #5F6D7E;
}


.family-formats-promo {
    background-color: var(--controls-accent-bg-color);
    /* background-image: url(/img/fam/bg.webp); */
    border-radius: 1rem;
   
  
    min-height: 19.25rem;
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
}
.family-formats-promo__footer {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 28%;
    width: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    /* background-image: url(/img/fam/file-formats.svg); */
}

.family-formats-promo__heading {
    font-family: 'Poppins','Inter', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
    margin-bottom: 1rem;
}

.family-formats-promo__subheading {
    margin-top: 0.75rem;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.44;
    letter-spacing: -0.03em;
    color: #f0f0f0ff;
    text-align: center;
    max-width: 50rem;
    margin: 0 auto;
}

.family-formats-promo__subheading a {
    color:#fff;
}

.family-platforms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.family-platform-card {
    width: 23rem;
    margin-bottom: 2rem;
    border:1px solid #EAEBF0;
    border-radius: 0.625rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
}

.family-platform-card {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.family-platform-card--green {
    border-top: 2px solid #57AB64;
}

.family-platform-card--blue  {
    border-top: 2px solid var(--controls-accent-bg-color);
}

.family-platform-card--red  {
    border-top: 2px solid #F4594F;
}


.family-platform__header h4 {
    font-size: 1.4rem;
font-weight: 600;
color: var(--controls-accent-bg-color);;
letter-spacing: -0.3px;
text-align: center;
margin-bottom: 1rem;
}

/* .family-platform-card--green .family-platform__header {
    color: #57AB64;
}

.family-platform-card--blue .family-platform__header  {
    color: var(--controls-accent-bg-color);
}

.family-platform-card--red .family-platform__header  {
    color: #F4594F;
} */

.family-platform__row {
    color:#5F6D7E;
    line-height: 1.4;
    border-bottom: 1px solid #EDEDED;
    padding: 1rem 0;
    overflow: hidden;

}

.family-platform__footer {
    padding-top: 1.5rem;
    text-align: center;
}

.family-platform-card--blue .family-platform__footer > a {
    color:var(--controls-accent-bg-color);
}

.family-platform-card--red .family-platform__footer > a {
    color:#F4594F;
}

.family-platform-card--green .family-platform__footer > a {
    color:#57AB64;
}

.family-platform__row--4
{
    min-height: 7.8rem;
}

.family-platform__row--3
{
    min-height: 6.3rem;
}

.family-platform__row--2
{
    min-height: 4.8rem;
}

.family-platform__row:last-child {
    border-bottom: none;
}


.alternates__list {
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    margin-bottom: 7rem;

}

.alternates__item {
    background-color: #fff;
    border:1px solid #EAEBF0;
    border-radius: 0.375rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 15rem;
    transition: border-color 0.15s linear;
}

.alternates__item:hover {
    border-color:#ccd1db;
}


.alternates__item-icon {
width: 3.15rem;
height:3.15rem;

}


.alternates__item-heading  {
font-size: 1.4rem;
font-weight: 600;
color: var(--controls-accent-bg-color);
letter-spacing: -0.3px;
}

.alternates__item-subheading  {
color: #5F6D7E;
}



/* ==== Text Block section ==== */ 

.text-section {
    background-color: var(--text-section);
}

.text-section-images {
    text-align: center;
}

.text-section ul {
    display: block;
    list-style-type: disc;
    text-align: match-parent;
    margin-block-start: 0.75em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
}

.text-section ul li {
    display: list-item;
    box-sizing: border-box;
    text-align: match-parent;
    font-size: 1.1rem;
    color: var(--text-color-light);
    font-weight: 400;
    line-height: 1.5;
}

/* =========== /end text block section ====== */






/* Code samples */

.code-samples__subtitle {
    margin-top: 2rem;
   
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: #272D37;
    /* padding-left: 1.5rem; */
}

.code-samples__wrap {
    padding-top: 0.5rem;
    max-width: 71.625rem;
    margin: 0 auto;
}

.code-samples__text {
    margin-top: 1rem;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: #5F6D7E;
}

.code-samples__text > p {
    /* padding-left: 1.5rem; */
}

.code-samples__text a {
    color:var(--controls-accent-bg-color);
}

.code-samples__note {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: #464f5a;
    padding: 0.875rem 1.5rem;
 
    border-bottom: 1px solid #edf1f7;
}

.code-samples__tabs {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.75;
      
    padding: 0 1.5rem;
 
    border-bottom: 1px solid #edf1f7;
    display: flex;
    gap:1rem;
}

.code-samples__tabs > a {
    padding: 1rem 0.5rem;
    color:#272D37;
    margin-bottom: -1px;
}

.code-samples__tab--blue.active  {
    border-bottom: 2px solid var(--controls-accent-bg-color);
    color: var(--controls-accent-bg-color);
}

.code-samples__tab--green.active  {
    border-bottom: 2px solid #57AB64;
    color: #57AB64;
}

.code-samples__tab--red.active  {
    border-bottom: 2px solid #F4594F;
    color: #F4594F;
}

.code-samples__desc {
    margin-top: 2.5rem;
    background: #FFFFFF;
    box-shadow: 0 0.0625rem 0.1875rem rgba(96, 108, 128, 0.05);
    border-radius: 0.5rem;
  
}
.code-samples__code {
    
    padding: 2rem 1.5rem;
    overflow-x: hidden;
    font-size: 0.875rem;
    display: none;
}

.code-samples__code.active {
    display: block;
}

.code-samples__code code > span {
    counter-increment: line;
  
}
.code-samples__code code > span:before{
    content: counter(line);
    display: inline-block;
    width: 2rem;
    min-width: 2rem;
    color: #bfbfbf;
    -webkit-user-select: none;
} 


.metrics__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.metrics__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 20rem;
    margin: 1rem 1rem;
}

.metrics__item-number {
    margin-bottom: 0.6rem;
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--controls-accent-bg-color);
}

.metrics__item-heading  {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: var(--controls-accent-bg-color);
}

.metrics__item-subheading  {
    color: #5F6D7E;
    text-align: center;
}

/* Faq */
.faq__list a {color:var(--controls-accent-bg-color);}

.faq__list-item {
    background: #FFFFFF;
    border: 1px solid #E5EAF4;
  
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 1rem;
    cursor:pointer;
    transition: border-color 0.15s linear;
}

.faq__list-item:hover {
    border-color:#ccd1db;
}

.faq__list-item:last-child {
    margin-bottom:0;
}

.faq__question {
    font-size: 1.25rem;
    font-weight: 600;
    color:#2B2B2B;
    display: flex;
    justify-content: space-between;
    line-height: 2rem;
}

.faq__question > span  {
    width: 100%;
}

.faq__icon {
    width: 1rem;
    height: 1rem;
    /* background-image: url(/img/fam/icons.svg#faq_plus); */
    background-repeat: no-repeat;
    background-size: 1rem;
    margin-top: 0.25rem;
    margin-left:1rem;
}

.faq__answer {
    display: none;
    font-size: 1rem;
    line-height: 1.8rem;
    color: #5B5B5B;
    margin-top:1rem;
}

.faq__list-item.opened .faq__answer {
    display: block;
}

.faq__list-item.opened .faq__icon {
    /*background-image:  url(/img/fam/icons.svg#faq_minus);*/
}



.customers__list {
    
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    background-color: #eaeef1;
  
}

.customers__item {
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 2.5rem 0;
}

.customers__logo {
    width:170px;
    height:70px;
} 


/* =========================================== */
/* Bread crumbs */
/* =========================================== */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    color: var(--text-color);
    font-size: .875rem;
    font-weight: 400
}

.breadcrumbs>li {
    margin-bottom: 1rem
}

.breadcrumbs a {
    color: var(--breadcrumbs-color)
}

.breadcrumbs a:hover {
    color: var(--breadcrumbs-active-color)
}

.breadcrumbs>li>span {
    color: var(--breadcrumbs-active-color)
}

.breadcrumbs>li::after {
    content: "/";
    padding: 0.7rem;
    opacity: 0.6;
    color: #ffffff;
}

.breadcrumbs>li:last-child::after {
    content: "";
    padding: 0
}

/* =========================================== */




@media (min-width: 1921px) {
    .lnd-wrap {max-width: 1640px;}
    
}


@media (max-width: 1200px) {
   
    html {font-size: 14px;}


   

    
}

@media (max-width: 1020px) {

    .container {
        padding: 0 1rem;

    }

    .section {
        margin-top: 4rem;
        padding: 4rem 0;
    }

    .family-header__title {
        font-size: 3.5rem;
    }

    .family-header__platform-heading {
        font-size: 3.5rem;
    }
    .section-header__heading {
        font-size: 2.5rem;
    }

    .family-formats-promo {
        min-height: 22rem;
    }

    .family-formats-promo__heading {
        font-size: 2.5rem;
    }

    .family-actions__heading {
        font-size: 2.5rem;
    }

    .family-header__columns {
        flex-direction: column;
    }

    .family-header__features-box {
        padding-left:0;
        padding-top:3rem;
    }

    .family-header__platforms-list {
        flex-direction: column;
    }

    .family-header__platforms-list > li > a::after {
        display: none;
    }

    .family-features__list {
        grid-template-columns: 1fr;
    }
   
    .family-features__item
    {
        padding:2.5rem 1.5rem;
    }

    .family-features__item-icon {
        width: 3.5rem;
        height: 3.5rem;
      
        background-size: 1.75rem;
        margin-bottom: 0.5rem;
    }


    .code-samples__code {
        overflow-x: scroll;
        -webkit-text-size-adjust: none;
    }

    .code-samples__subtitle {
       
        padding-left: 0;
    }
    
   
    .code-samples__text > p {
        padding-left: 0;
    }
    

    .family-formats-promo__footer {
        height: 17%;
    }
   

    .metrics__list {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }

    .metrics__item {
        padding: 2rem 1rem;
    }

    .customers__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .customers__logo {
        width: 150px;
        height: 62px;
    }

    .alternates__list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .code-tab-content {
        max-width: 31rem;
    }

    .page-header {
        background: #ffffff !important;
    }
}

@media (max-width: 567px) {
    .code-tab-content {
        max-width: 25rem;
    }
}

@media (max-width: 467px) {
    .code-tab-content {
        max-width: 20rem;
    }
}

@media (max-width: 367px) {
    .code-tab-content {
        max-width: 15rem;
    }
}

/* ================  ===========================  =================== */
/* Short Code Sample - Page header */
/* ================  ===========================  =================== */

.page-header {
    padding: 2rem 0 1rem 0;
    background-color: var(--controls-accent-bg-light);
    background: linear-gradient(90deg,var(--controls-accent-bg-light) 40%,var(--controls-accent-bg-color) 100%);
}

.page-header__columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    margin-bottom: 1.5rem;
}

.page-header__column_left {
    max-width: 25rem;
    margin-right: 3rem;
    padding-bottom: 1rem;
}

.page-header__column_right {
    flex: 1 1 auto;
}

.page-header__line {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.page-header__logo {
    width: 10rem;
    height: 2rem;
}

.page-header__title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2.7rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #272D37;
    margin-bottom: 1.5rem;
   
}

.page-header__subtitle
{
    color: var(--text-color-light);
    font-size: 1.125rem;
    line-height: 1.625rem;
    font-weight: 400;
    margin-bottom: 3rem;
    letter-spacing: -0.03em;
}

.page-header__subtitle p {
    margin-bottom: 1rem;
}

.page-header__btns {display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.browser {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height: 18rem;
    background-color: #ffffff;
    border: solid 1px #eaebf0;
    border-radius: 0.625rem;
}

.browser_content {
    display: flex;
    flex-direction: column;
}

.browser__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
}

.browser__header-title {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Poppins', 'Inter', sans-serif;
    color: var(--controls-accent-bg-color);
}

.browser__header-link {
    color: var(--link-color);
    font-size: 0.75rem;
    white-space: nowrap;
} 

.outer-code-container{
    display: flex;
}

.code-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.lang-images-container {
    margin-top: 1rem;
    margin-bottom: 0rem;
}

.language-images {
    display: flex;
    flex-direction: column;
    margin: 0px 10px 0px 10px;
    border: none;
  }

.language-images img.selected {
    box-shadow: 0 0 14px rgba(255, 64, 0, 0.85); /* Adjust color and intensity as needed */
    transform: scale(1.3);
    border: solid var(--allert-color) 1px;
}
  
.language-images img {
    width: 42px; /* Adjust image size as needed */
    height: 42px;
    margin: 0px 10px 15px 0px;
    padding: 3px;
    cursor: pointer;
    box-shadow: 0rem 0.4rem 1.1rem rgba(0, 0, 0, 0.35);
    background-color: #fff;
    border-radius: 0.4rem;
    transition: transform 250ms;
}

.language-images img:hover {
    transform: scale(1.3);
}

.language-images img:last-child {
    /* margin-bottom: 23px; */
}

.code-tab-content {
    flex: 1 1 auto;
    overflow-x: auto;
}

.browser__links-box {
    margin-top: auto;
    padding: 1rem;
    padding-top:0;
}

.browser__links {
    display: flex;
    align-items: center;
    padding: 0.9rem 0.2rem 0.1rem 0.2rem;
    border-top: solid 1px #eaebf0;
}

.browser__links > a {
    padding-right: 0.6rem;
    color: var(--link-color-dark);
    font-size: 0.9rem;
}

.browser__links > a:not(:first-child) {
    padding-left: 0.6rem;
    border-left: solid 1px #eaebf0;
}

.code-sample {
    display: none; /* Initially hide all code samples */
  }

.code-sample.active {
    display: block; /* Show the active code sample */
}

.code-tabs {
    margin: 0px 0px 30px 24px;
}

.code-tab-btn {
    color: var(--link-color);
    background-color: var(--control-alt-color);
    font-size: 0.9rem;
    border: 1px solid var(--control-color);
    border-radius: 7px;
    padding: 4px 24px;
    cursor: pointer
}
.code-tab-btn:hover {
    color: #000000;
    background-color: #ffffff;
}

.code-tab-btn.code-tab-btn-active {
    color: #ffffff;
    background-color: var(--control-color);
}

.browser__code {
    font-family: monospace;
    font-size: 0.875rem;
    color:#666666;
    padding: 0 1.5rem;
    margin-bottom: 1.5rem;
    min-height: 9.5rem;
}


.browser__code code > span {
    counter-increment: line;
}
.browser__code code > span:before{
    content: counter(line);
    display: inline-block;
    width: 2rem;
    color: #bfbfbf;
    -webkit-user-select: none;
}

.browser__package > code {
    font-family: monospace;
    font-size: 0.875rem;
    color:#272d37;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 80%;
}

.browser__package > button {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    /*background-image: url(../images/airspace/icons.svg#copy);*/
    background-size: 1.5rem;
    background-repeat: no-repeat;
    margin-left: auto;
    padding: 0 1.1rem;
   

}

.browser__package > button.browser__done {
    /*background-image: url(../images/airspace/icons.svg#done);*/
}

/* ================  ===========================  =================== */


/*  ======= Floating Menu ======== */

.sidebar {
    position: fixed;
    top: 200px; /* Adjust as needed */
    right: 5px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
  }
  
  .sidebar_btn {
    display: flex;
    align-items: center;
    width: 40px; /* Initial width */
    height: 40px; /* Initial height */
    background-color: hsla(0, 0%, 96%, 0.7); /* Beige color with 30% opacity */
    color: var(--link-color);; /* Text color */
    border-radius: 12px; /* Curved corners */
    box-shadow: 0rem 0.5rem 0.5rem rgba(0, 0, 0, 0.14);
    margin-bottom: 10px;
    cursor: pointer;
    transition: width 0.3s, background-color 0.3s;
    overflow: hidden; /* Hide text overflow */
  }
  
  .sidebar_btn:hover {
    width: 160px; /* Expanded width */
    background-color: hsl(0, 0%, 100%);; /* Fully opaque beige color */
    box-shadow: 0rem 0.7rem 1.5rem rgba(0, 0, 0, 0.5);
    transform: scale(1.2); /* 50% zoom on hover */
  }
  
  .sidebar_btn img {
    width: 24px; /* Adjust as needed */
    height: 24px; /* Adjust as needed */
    margin-left: 8px; /* Adjust as needed */
    margin-right: 5px; /* Adjust as needed */
    transition: transform 0.3s;
  }
  
  .sidebar_btn:hover img {
    margin-left: 15px;
    transform: scale(1.1); /* 50% zoom on hover */
  }
  
  .btn-text {
    opacity: 0; /* Initially hide text */
    margin-left: 8px;
    font-weight: 600; /* Adjust font weight to make it slightly bolder */
    transition: opacity 0.3s, transform 0.3s;
    transform: translateX(100%); /* Initial position outside the button */
  }
  
  .sidebar_btn:hover .btn-text {
    opacity: 1; /* Show text on hover */
    transform: translateX(0); /* Slide text in from right */
  }
  
  
  
  

/*  ======= ============================================================================ ======== */


/* ========== OMR Live Code Sample  ============ */

/* -- Langing part -- */

.live-sample {
    padding-top: 3.5rem;
}

.ocr-lcs-disclaimer {
    color: #323232;
}

.ocr-lcs-disclaimer a {
    color: var(--link-color-dark)
}

.live-sample__block{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.live-sample__visual{
    width: 360px;
    margin-bottom: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.live-sample__right{
    max-width: 43rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.live-sample__right_title {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    margin-block-start: 0em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 2rem;
    color: var(--controls-accent-bg-color);
}

.live-sample__right_container {
    display: flex;
    row-gap: 1.2rem;
    column-gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 0rem;
  }

.live-sample__right_container > a {
    display: flex;
    align-items: center;
    border: solid 2px var(--controls-accent-bg-color);
    border-radius: 0.5rem;
    padding: 0.1rem 1rem 0.1rem 0.6rem;
    min-width: 20rem;
    color: var(--controls-accent-bg-color);
    font-weight: 600;
}

.live-sample__right_container > a:hover {
    background-color: #ffffff;
}

.live-sample__right_container > a > img {
    width: 3rem;
    height: 3rem;
    margin-right: 0.7rem;
}

/* ========== END / OMR Live Code Sample  ============ */