@font-face {
    font-family: 'NAMU 1750';
    src: url('/static/fonts/namu_1750.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/static/fonts/IBMPlexSans-VariableFont_wdth,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Regular';
    src: url('/static/fonts/helvetica_regular.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: 'Inria Sans';
    src: url('/static/fonts/inria-sans-v15-latin-regular.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-display: swap;
}

/** {*/
/*    border: 1px solid red;*/
/*}*/

:root {
    --font-namu: 'NAMU 1750', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ibm: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-helvetica: 'Helvetica Regular', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-inria-sans: 'Inria Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --color-light-gray: #F3F3F6;
    --color-koamaru-dark: #3146AE;
    --color-koamaru-light: #2B3771;
    --color-chinese-black: #0D0C22;
    --color-ukraine-blue: #13122E;
    --color-ancilliary: #E0EB92;
    --color-body-font: #363646;
    --color-stroke: #CFCED3;

}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'NAMU 1750', -apple-system, BlinkMacSystemFont, sans-serif;
    /*font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

@media (max-width: 640px) {
    body {
        font-size: 16px; /* Regular smartphones */
    }
}

@media (max-width: 400px) {
    body {
        font-size: 14px; /* Small-screen smartphones */
    }
}

.container-96 {
    width: 100%;
    @media (width >= 40rem) {
        max-width: 40rem;
    }
    @media (width >= 48rem) {
        max-width: 48rem;
    }
    @media (width >= 64rem) {
        max-width: 64rem;
    }
    @media (width >= 96rem) {
        max-width: 1128px;
    }
}

.container-1320 {
    width: 100%;
    @media (width >= 40rem) {
        max-width: 40rem;
    }
    @media (width >= 48rem) {
        max-width: 48rem;
    }
    @media (width >= 64rem) {
        max-width: 64rem;
    }
    @media (width >= 96rem) {
        max-width: 82.5rem;
    }
}

/*shoelace.style*/
/*sl-drawer:not(:defined),*/
/*sl-carousel:not(:defined),*/
/*sl-details:not(:defined) {*/
/*    display: none;*/
/*}*/

/*sl-input:not(:defined),*/
/*sl-select:not(:defined),*/
/*sl-textarea:not(:defined),*/
/*sl-details:not(:defined) {*/
/*  visibility: hidden;*/
/*  opacity: 0;*/
/*}*/

/*sl-input,*/
/*sl-select,*/
/*sl-textarea,*/
/*sl-details {*/
/*  visibility: visible;*/
/*  opacity: 1;*/
/*  transition: opacity 0.3s ease-in;*/
/*}*/

sl-drawer:not(:defined) {
    visibility: hidden;
    opacity: 0;
}

/*skeleton*/

@keyframes shine {
    0% {
        background-position: -32px;
    }
    40%, 100% {
        background-position: 208px;
    }
}

sl-input:not(:defined) > * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

sl-input.input-skeleton:not(:defined) {
    display: block;
    width: 100%;
    height: 67px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ececec 0px, #f4f4f4 40px, #ececec 80px);
    background-size: 250px 100%;
    animation: shine 2s infinite ease-out;
}

sl-details:not(:defined) > * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

sl-details.exclusive_access_widget:not(:defined) {
    display: block;
    width: 100%;
    height: 56px;
    border-radius: 8px;
    /*background: linear-gradient(90deg, #ececec 0px, #f4f4f4 40px, #ececec 80px);*/
    background: white;
    background-size: 250px 100%;
    animation: shine 2s infinite ease-out;
}

/*end*/

/*shoelace.style end*/

/* Fonts */
.font-namu {
    font-family: var(--font-namu), sans-serif;
}

.font-ibm {
    font-family: var(--font-ibm), sans-serif;
}

.font-helvetica {
    font-family: var(--font-helvetica), sans-serif;
}

.font-inria-sans {
    font-family: var(--font-inria-sans), sans-serif;
}

/* Text colors */
.text-light-gray {
    color: var(--color-light-gray);
}

.text-koamaru-dark {
    color: var(--color-koamaru-dark);
}

.text-koamaru-light {
    color: var(--color-koamaru-light);
}

.text-chinese-black {
    color: var(--color-chinese-black);
}

.text-ukraine-blue {
    color: var(--color-ukraine-blue);
}

.text-ancilliary {
    color: var(--color-ancilliary);
}

.text-body-font {
    color: var(--color-body-font);
}

.text-stroke {
    color: var(--color-stroke);
}

/* Backgrounds */
.bg-light-gray {
    background-color: var(--color-light-gray);
}

.bg-koamaru-dark {
    background-color: var(--color-koamaru-dark);
}

.bg-koamaru-light {
    background-color: var(--color-koamaru-light);
}

.bg-chinese-black {
    background-color: var(--color-chinese-black);
}

.bg-ukraine-blue {
    background-color: var(--color-ukraine-blue);
}

.bg-ancilliary {
    background-color: var(--color-ancilliary);
}

.bg-body-font {
    background-color: var(--color-body-font);
}

.bg-stroke {
    background-color: var(--color-stroke);
}

/* Borders */
.border-light-gray {
    border-color: var(--color-light-gray);
}

.border-koamaru-dark {
    border-color: var(--color-koamaru-dark);
}

.border-koamaru-light {
    border-color: var(--color-koamaru-light);
}

.border-chinese-black {
    border-color: var(--color-chinese-black);
}

.border-ukraine-blue {
    border-color: var(--color-ukraine-blue);
}

.border-ancilliary {
    border-color: var(--color-ancilliary);
}

.border-body-font {
    border-color: var(--color-body-font);
}

.border-stroke {
    border-color: var(--color-stroke);
}

.header {
    background-color: var(--color-chinese-black);
}

@media (min-width: 640px) {
    .header {
        transition: background-color 0.3s ease;
    }

    body.home-page .header {
        background-color: transparent;
    }

    body.home-page .header.scrolled {
        background-color: var(--color-chinese-black);
    }

    body.inner-page .header {
        background-color: var(--color-chinese-black);
    }

    .header.scrolled {
        background-color: var(--color-chinese-black);
    }
}

.actual {
    background-color: var(--color-ukraine-blue);
    background: radial-gradient(ellipse 1600px 700px at 95% 5%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 50%),
    var(--color-ukraine-blue);
}

.actual sl-carousel::part(base) {
    height: 460px;
}

/*burger menu*/
.nav_burger {
    width: 100%;
    max-width: 470px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}

.nav_link_burger {
    white-space: nowrap;
    color: var(--color-light-gray);
    font-weight: 500;
    cursor: pointer;
    font-size: 16px;
}

.active {
    color: var(--color-light-gray);
}

sl-drawer.drawer-placement-start::part(panel) {
    background: var(--color-ukraine-blue);
}

sl-drawer.drawer-placement-start::part(title) {
    color: var(--color-light-gray);
}

.btn-close-menu::part(base) {
    color: var(--color-light-gray);
}

/*burger end*/

.clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/*start*/
.slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and old Edge */
}

.slider .slider-track {
    display: flex;
    gap: 15px;
    margin: 0 auto;
}

.slider .slide {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    border-radius: 10px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: white;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.progress {
    height: 100%;
    width: 10%;
    background: var(--color-koamaru-light);
    transition: width 0.2s;
}

/*end*/

sl-input::part(form-control-label),
sl-select::part(form-control-label),
sl-textarea::part(form-control-label) {
    color: var(--color-chinese-black);
    font-family: var(--font-ibm), sans-serif;
    margin-bottom: 6px;
}

sl-input::part(base),
sl-select::part(base),
sl-textarea::part(base) {
    border-radius: 8px;
    border: 1px solid var(--color-stroke);
    font-family: var(--font-ibm), sans-serif;
    color: var(--color-body-font);
}

sl-select::part(combobox) {
    margin-top: 4px;
}

sl-textarea::part(textarea) {
    resize: none;
    height: 88px;
}

sl-option[data-current]::part(base) {
    background-color: var(--color-koamaru-light);
    /*color: white;*/
}

sl-checkbox::part(control control--checked) {
    border-color: var(--color-koamaru-light);
    background-color: var(--color-koamaru-light);
}

.btn {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-inline: 24px;
    padding-block: 12px;
    border-radius: 8px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 300;
    font-size: 14px;
    @media (width > 48rem) {
        width: fit-content;
    }
}

.btn:disabled {
    color: white;
    background-color: var(--color-stroke);
}

.btn:hover {
    opacity: 0.9;
}

.btn:active {
    opacity: 1;
}

.btn-blue {
    background-color: var(--color-koamaru-light);
    color: white;
}

.btn-ukraine-blue {
    background-color: var(--color-ukraine-blue);
    color: white;
}

.btn-white {
    border: 1px solid var(--color-body-font);
    color: var(--color-body-font);
}

.btn-white:hover {
    opacity: 1;
    background-color: var(--color-slate-100);
}

.btn-white:active {
    background-color: transparent;
}

.btn-koamaru-light {
    border: 1px solid var(--color-koamaru-light);
    color: var(--color-koamaru-light);
}

.btn-koamaru-light:hover {
    opacity: 1;
    background-color: var(--color-slate-100);
}

.btn-koamaru-light:active {
    background-color: transparent;
}

.btn:disabled {
    color: white;
    background-color: var(--color-stroke);
    cursor: default;
    opacity: 1;
    pointer-events: none;
    border: none;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 300;
}

.pagination .page-link {
    height: 36px;
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.pagination .page-link.active {
    background-color: var(--color-koamaru-light);
    color: white;
}

.table {
    width: 100%;
}

.table th {
    padding: 12px;
    white-space: nowrap;
    font-family: var(--font-namu), sans-serif;
    color: var(--color-chinese-black);
    font-weight: 300;
    border-bottom: 1px solid var(--color-stroke);
    text-align: start;
}

.table tbody tr {
    border-bottom: 1px solid var(--color-stroke);
}

.table tbody tr th,
.table tbody tr td:nth-child(3),
.table tbody tr td:nth-child(4) {
    font-family: var(--font-ibm), sans-serif;
    color: var(--color-body-font);
    padding: 12px;
    white-space: nowrap;
}

.table tbody tr td:nth-child(2) {
    font-family: var(--font-ibm), sans-serif;
    color: var(--color-koamaru-light);
    padding: 12px;
    text-decoration: underline;
}

.list-disc {
    list-style-type: disc;
    padding-left: 1.5rem;
}

sl-details::part(base) {
    border-radius: 8px;
}

sl-details::part(summary) {
    font-family: var(--font-namu), sans-serif;
    color: var(--color-chinese-black);
    font-size: 20px;
    font-weight: 300;
}

sl-details::part(content) {
    padding-top: 0;
}

sl-details.exclusive_access_widget::part(base) {
    border: none;
}

.render_blog_card__body p {
    text-wrap: wrap;
}

.unreset-ui ul {
  list-style: disc;
  margin-left: 1.5rem;
}

.unreset-ui ol {
  list-style: decimal;
  margin-left: 1.5rem;
}

.unreset-ui li {
  display: list-item;
}