@import url(https://db.onlinewebfonts.com/c/c26179a6c23d2237e25a2b846421298f?family=Bafora+Demo);

:root 
{ 
    --mok-max: 1100px; 
    --defFontFamily: "Heebo", Helvetica, Arial, Verdana, sans-serif;
    --body-bg: #1f1f1f;
    --content-bg: #0e0e0e;
    --bs-primary-color: #dfdfdf;
    --bs-secondary-color: #c5b65f;
    --content-fg: var(--bs-primary-color);
    --mok-card-bg: #1b1b1b !important;
    --mok-card-fg: #fff !important;
    --mokaOrange: #e6b40e;
    --form-input-bg: #8b8b8b;
    --fomt-input-border: 0px;
    --fomt-input-color: white;
}

body 
{ 
    background: var(--body-bg); 
    color: var(--content-fg) !important;
    font-family: var(--defFontFamily);
}
html, body { height: 100%; }

.form-control
{
    color: var(--fomt-input-color) !important;
    background-color: var(--form-input-bg) !important;
    border: var(--fomt-input-border);
}

.form-control::placeholder
{
    color: rgb(64, 64, 64) !important;
}

.resetbutton
{
    padding: 10px !important;
    background-color: dimgray !important;
    color: var(--mokaOrange) !important;
    cursor: pointer;
}

.mok-round-btn
{
    padding: 10px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    
    border-radius: 50vh;
    font-weight: bold;
    transition: all 0.4s;
    cursor: pointer;

    text-wrap: nowrap;
}

.mok-round-btn.primary
{
    background-color: rgb(17, 70, 216) !important;
    color: #d1d1d1 !important;
    cursor: default;
    cursor: pointer;
    transition: all 0.4s;
}

.mok-round-btn.primary:hover
{
    background-color: rgb(37, 89, 233) !important;
    color: #fafafa !important;
}

.mok-round-btn.info
{
    background-color: whitesmoke !important;
    color: #6b6b6b !important;
    cursor: default;
}

.mok-round-btn.family
{
    color: #6b6b6b !important;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    -webkit-animation: aniMokRoundButtonBlinking 1s infinite;  /* Safari 4+ */
    -moz-animation: aniMokRoundButtonBlinking 1s infinite !important;  /* Fx 5+ */
    -o-animation: aniMokRoundButtonBlinking 1s infinite !important;  /* Opera 12+ */
    animation: aniMokRoundButtonBlinking 1s infinite !important;  /* IE 10+, Fx 29+ */
}
.mok-round-btn.family, .mok-round-btn.family a, .mok-round-btn.family a:visited
{
    text-decoration: none;
    color: #461b1b !important;
}
.mok-round-btn.family:hover
{
    color: #7a1919 !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
    background-color: var(--mokaOrange) !important;
}

.mok-round-btn.askinfo
{
    background-color: #b9ebc8 !important;
    color: #6b6b6b !important;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}
.mok-round-btn.askinfo:hover
{
    background-color: #89f0a8 !important;
    color: #929191 !important;
}

.mok-round-btn.askinfo button
{
    color: indianred !important;
    background-color: transparent !important;
    border: none !important;
    font-weight: bold;
}

@keyframes aniMokRoundButtonBlinking
{
    0% { background-color: var(--mokaOrange); }
    50% { background-color: rgb(148, 96, 0); }
    100% { background-color: var(--mokaOrange); }
}

.mok-ask-info-button
{
    padding: 18px;
    background: #e79311;
    border-radius: 50vh;
    color: #bd0505;
    font-weight: bold;
    border-color: red;
    transition: all 0.4s;
    cursor: pointer;
}

.mok-ask-info-button:hover
{
    background: #640d01;
    color: #f80505;
    border-color: red;
}

.navbar, .nav-link
{
    background-color: var(--content-bg) !important;
}

.navbar .nav-item a
{
    color: var(--content-fg) !important;
    font-size: 1.6rem;
}

.navbar .nav-item.active a
{
    color: var(--mokaOrange) !important;
}

.navbar
{
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: rgba(255,255,255,.35);
}
.navbar .navbar-toggler
{
    border: 0px !important;  /*var(--bs-navbar-toggler-border-color) !important;*/
}
.navbar .navbar-toggler-icon
{
    background-image: var(--bs-navbar-toggler-icon-bg) !important;
}


/* ******************* */
/* MOK MODAL */

.mok-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 12px; }
.mok-modal { position: relative; width: 100%; max-width: 680px; background: #fff; color: #222; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.mok-modal-header { padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.08); }
.mok-modal-body { padding: 16px; overflow: auto; }
.mok-modal-footer { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,.08); }
.mok-modal-close { border: 0; background: transparent; color: #333; width: 36px; height: 36px; font-size: 24px; line-height: 1; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.mok-modal-close:hover { background: rgba(0,0,0,.06); }
.dark .mok-modal { background: #1d1d1d; color: #eee; }
.dark .mok-modal-header { border-bottom-color: rgba(255,255,255,.12); }
.dark .mok-modal-footer { border-top-color: rgba(255,255,255,.12); }

/* MOK MODAL */
/* ******************* */
/* ******************* */



/* ******************* */
/* Event Alert */


.mok-modal.mok-shadow
{
    box-shadow: 0px 1px 13px 11px #080808;
}

.mok-modal .where-button
{
    width: auto;
    cursor: pointer;
    padding: 10px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
    background-color: lightskyblue;
    font-family: cursive;
    text-decoration: none;
    border-radius: 10px;
}

.mok-modal-body
{
    padding: 5px !important;
}

.event_alert .mok-event-date
{
    font-size: 1.2rem;
    color: var(--mokaOrange);
}

.mok-modal.event_alert
{
    background-color: #2b2a2aed !important;
    color: var(--mok-card-fg) !important;
    border: 1px solid orange;
    border-radius: 20px !important;
}

.mok-event-main-container
{
    position: relative;
    max-width: 760px;
}

.mok-event-main-container .event-icon
{
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px !important;
    background-color: var(--mokaOrange) !important;
    color: #fafafa !important;
    border-radius: 50%;
    z-index: 100;
}

.mok-modal .mok-modal-header
{
    padding: 0 !important;
    color: var(--mok-card-fg) !important;
}

/* ******************* */
/* Admin Tabs */

.nav-tabs
{
    border-width: 0px !important;
}

.nav-tabs .nav-link
{
    background-color: var(--body-bg) !important;
    border-radius: 0px !important;
    color: #bebebe !important;
}


.nav-tabs .nav-item a ,.nav-tabs .nav-item a:visible
{
    color: var(--content-fg) !important;
    font-size: 1.6rem;
}


.nav-tabs .nav-link.active
{
    background-color: #3b3b3b !important;
    color: var(--mokaOrange) !important;
    border-width: 0px !important;
}

/* Admin Tabs */
/* ******************* */

@media (max-width: 576px) 
{ 
    .navbar .nav-item a
    {
        font-weight: bold;
        font-size: 1.6rem;
    } 
}


main
{
    background-color: var(--content-bg) !important;
}

footer
{
    background-color: var(--body-bg) !important;
    color: var(--content-fg) !important;
}

.mok-contact-description p,
.mok-contact-description div,
.mok-contact-description h2,
.mok-contact-description h3,
.mok-contact-description h4,
.mok-contact-description ul,
.mok-contact-description ol,
.mok-contact-description li
{
    display: inline;
    margin: 0;
    padding: 0;
}

.mok-contact-description ul,
.mok-contact-description ol
{
    list-style: none;
}

.adv-reserch
{
    font-weight: normal !important;
}

.mok-container 
{ 
    max-width: var(--mok-max); 
    margin: 0 auto; 
    /* background: var(--content-bg);  */
}

.mok-full-bleed
{
    width: 99.5vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.mok-home-slider
{
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    background-color: rgba(255,255,255,.06);
    opacity: 0;
    transition: opacity 600ms ease;
}

.mok-home-slider--mounted
{
    opacity: 1;
}

.mok-home-slider-track
{
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mok-home-slider-slide
{
    flex: 0 0 100%;
    height: 100%;
}

.mok-home-slider-img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mok-home-slider-title
{
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    max-width: min(70vw, 520px);
    padding: 10px 12px;
    color: #fff;
    /* 
    border-radius: 10px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.2); 
    */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 380ms ease, transform 380ms ease;
    pointer-events: none;
    font-size: 60px;
    fill: #fff;
    font-family: Bafora Demo;
}

.mok-home-slider-title.is-visible
{
    opacity: 1;
    transform: translateY(0);
}

.mok-home-slider-nav
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    border-radius: 23px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 34px;
    line-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mok-home-slider-nav:hover
{
    background: rgba(0,0,0,.55);
}

.mok-home-slider-nav--left
{
    left: 16px;
}

.mok-home-slider-nav--right
{
    right: 16px;
}

.mok-home-slider-dots
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.mok-home-slider-dot
{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    border: 0;
    background: rgba(255,255,255,.35);
    padding: 0;
}

.mok-home-slider-dot.is-active
{
    background: var(--bs-secondary-color);
}

.mok-home-quote
{
    background: rgba(255,255,255,.03) !important;
    position: relative;
    font-family: Bookman, Times;
    max-height: 550px;
    overflow: hidden;
    margin-top: 80px;
    margin-bottom: 80px;
}

.mok-home-quote-title
{
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
}

.mok-home-quote-img
{
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    opacity: 0.3 !important;
    background-position: 50% 100%;
    background-size: cover;
    opacity: .1;
    padding-top: 80%;
    position: relative;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-blend-mode: multiply;
}

.mok-home-quote-img-overlay
{
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(#0202025d 47%, var(--content-bg) 75%);
    top: 0px;
}

.mok-home-quote-in
{
    position: absolute;
    top: 10px;
    left: 10px;    
    width: 154px;
    filter: invert(1);
    object-fit: cover;
    display: block;
}

.mok-home-quote-out
{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 154px;
    filter: invert(1);
    transform: rotate(180deg);
    object-fit: cover;
    display: block;
}

.mok-home-quote-img-author
{
    position: absolute;
    font-size: 1.4rem;
    font-style: italic;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -50%);
}

.mok-home-quote-text
{
    position: absolute;
    margin-top: 12px;
    white-space: pre-wrap;
    color: rgba(255,255,255,.75);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    text-shadow: 0 0 10px black;
}

@media (max-width: 576px) 
{ 
    .mok-home-quote
    {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .mok-home-quote-text
    {
        font-size: 1.4rem;
    } 
    .mok-home-quote-img-author
    {
        font-size: 1rem;
    }
    .mok-home-quote-in
    {
        width: 54px;
    } 
    .mok-home-quote-out
    {
        width: 54px;
    }
}


.mok-product-cover-banner
{
    height: 350px;
    background-color: rgba(255,255,255,.06);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 50%;
    position: relative;
    overflow: hidden;
}

.mok-product-cover-banner::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65));
}

.card
{
    background-color: var(--mok-card-bg) !important;
}
.card-header
{
    color: var(--mok-card-fg) !important;
}
.card-body
{
    color: var(--mok-card-fg) !important;
}

.table>:not(caption)>*>*
{
    background-color: var(--mok-card-bg) !important;
    color: var(--mok-card-fg) !important;
}

tbody, td, tfoot, th, thead, tr
{
    border-style: none !important;
    border-width: 0px !important;
}

.mok-card-img 
{
     width: 100%; 
     height: 220px; 
     object-fit: cover; 
     background: #f1f3f5; 
}

.mok-family-tile .mok-card-img 
{
    background-image: url('../images/site/black_bg_02-500x499-1-300x300.jpg');
    background-color: transparent !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.mok-family-tile:hover .mok-card-img 
{
    opacity: 0.3;
}

.mok-family-tile 
{ 
    position: relative;     
}
.mok-family-label 
{ 
    position: absolute; 
    inset: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 12px; 
    /* background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.20));  */
}

.mok-family-label :first-letter {
    text-transform: uppercase;
}

.mok-family-label-text 
{ 
    /* font-weight: 600;  */
    font-size: 2rem;
    text-align: center; 
    color: #fff; 
    text-shadow: 0 2px 6px rgba(0,0,0,.85); 
}

.mok-family-all 
{ 
    background: rgba(255,255,255,.06); 
}

.mok-pre { white-space: pre-wrap; }
.mok-tag { margin-right: 6px; }

.mok-chip
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: #1f4d80;
    color: var(--content-fg);
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
}

.mok-chip:hover
{
    background: rgba(255,255,255,.10);
    color: var(--content-fg);
}

.mok-chip.is-active,
.mok-chip.is-active:hover
{
    background: var(--bs-secondary-color);
    color: #0e0e0e;
    border-color: rgba(0,0,0,.10);
}

.mok-chip-x
{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,.35);
    color: rgba(255,255,255,.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mok-chip-x:hover
{
    background: rgba(0,0,0,.55);
}

.mok-chip-row
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mok-gallery-category-item
{
    background-color: rgba(255,255,255,.06);
    text-align: center;
    text-transform: uppercase;
    height: 34px;
    line-height: 34px;
}

.mok-gallery-category-item:hover
{
    background-color: rgba(255,255,255,.10);
}

.mok-gallery-category-item.active
{
    background-color: var(--mokaOrange);
    font-weight: bold;
    color: black;
}

.navbar-nav
{
    max-width: 790px;
}

.mok-social-bar
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 180px;
}

.mok-social-link
{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--content-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mok-social-link:hover
{
    background: rgba(255,255,255,.14);
    color: var(--content-fg);
}

.mok-social-link svg
{
    width: 18px;
    height: 18px;
}

.mok-masonry 
{ 
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -1px;
    margin-right: -1px;
}

.mok-masonry-sizer,
.mok-masonry-item
{
    width: 100%;
    box-sizing: border-box;
}

.mok-masonry-sizer
{
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
}

@media (min-width: 576px)
{
    .mok-masonry-sizer,
    .mok-masonry-item
    {
        width: 50%;
    }

    .mok-masonry-item
    {
        flex-basis: 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px)
{
    .mok-masonry-sizer,
    .mok-masonry-item
    {
        width: 33.3333%;
    }

    .mok-masonry-item
    {
        flex-basis: 33.3333%;
        max-width: 33.3333%;
    }
}

.badge
{
    padding: 10px;
    border-radius: 50vh;
}

.badge.mok-family
{
    color: #fff !important;
    text-decoration: none;
    -webkit-animation: aniBlinkingBadge 1s infinite;  /* Safari 4+ */
    -moz-animation: aniBlinkingBadge 1s infinite !important;  /* Fx 5+ */
    -o-animation: aniBlinkingBadge 1s infinite !important;  /* Opera 12+ */
    -o-animation: aniBlinkingBadge 1s infinite !important;  /* Opera 12+ */
    animation: aniBlinkingBadge 1s infinite !important;  /* IE 10+, Fx 29+ */
}


.list-group
{
    margin-bottom: 30px;
}

.list-group .list-group-item    
{
    background-color: #535353 !important;
    border: 0px !important;
    margin-bottom: 2px;
}

.mok-related-carousel
{
    position: relative;
}

.mok-related-strip
{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 46px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mok-related-strip::-webkit-scrollbar
{
    width: 0;
    height: 0;
}

.mok-related-item
{
    flex: 0 0 auto;
    width: 72px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    display: block;
}

.mok-related-item img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mok-related-placeholder
{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,.7);
}

.mok-related-arrow
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255, 166, 0, 0.664);
    color: rgba(255,255,255,.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.mok-related-arrow:hover
{
    background: rgba(0,0,0,.55);
}

.mok-related-arrow:disabled
{
    opacity: .35;
}

.mok-related-arrow-left { left: 3px; }
.mok-related-arrow-right { right: 3px; }

@media (max-width: 575.98px)
{
    .mok-related-item { width: 64px; }
    .mok-related-strip { padding-left: 40px; padding-right: 40px; }
}

@keyframes aniBlinkingBadge
{
  0%, 49% {
    background-color: var(--mokaOrange) !important;
    color: #fff !important;
  }
  50%, 100% {
    background-color: #9b650069 !important;
    color: #000 !important;
  }
}
.mok-masonry-item 
{ 
    display: block; 
    margin: 0; 
    padding: 1px;
    flex: 0 0 100%;
    max-width: 100%;
    text-decoration: none; 
    color: inherit; 
}

.mok-masonry-media 
{
    position: relative; 
    overflow: hidden; 
    /* border-radius: 12px;  */
    background: #111; 
}

.mok-unpublished-x
{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 84px;
    font-weight: 800;
    color: #ff3b30;
    text-shadow: 0 2px 10px rgba(0,0,0,.75);
    pointer-events: none;
    opacity: .95;
}

.mok-masonry-media img 
{ 
    width: 100%; 
    height: auto; 
    display: block; 
    transition: transform .25s ease; 
}

.mok-masonry-placeholder { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }
.mok-masonry-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 12px; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); opacity: 0; transition: opacity .2s ease; }
.mok-masonry-title { font-weight: 600; line-height: 1.2; }
.mok-masonry-cat { font-size: 0.875rem; opacity: .85; }
.mok-masonry-item:hover .mok-masonry-overlay { opacity: 1; }
.mok-masonry-item:hover .mok-masonry-media img { transform: scale(1.03); }

.mok-attach-grid 
{ 
    /* display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
    gap: 0px;  */
}
.mok-attach-tile 
{ 
    position: relative; 
}

.mok-attach-btn 
{ 
    padding: 0; 
}

.mok-attach-btn,
.mok-attach-add
{ 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    border-radius: 0px; 
    border: 0px solid rgba(255,255,255,.12);
    background: rgb(169 182 205 / 27%);
    color: #373737;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden;
}

.mok-attach-btn img
{
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
    opacity: 1;
    transition: opacity .5s ease;
}

.mok-attach-btn .mok-attach-overlay-title
{
    opacity: 0;
    transition: opacity .2s ease;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 0px 0px 7px #000000;
    transition: opacity 1s ease;
    font-family: "Heebo", Helvetica, Arial, Verdana, sans-serif;
}

.mok-attach-btn:hover img
{
    opacity: .2;
}

.mok-attach-btn:hover .mok-attach-overlay-title
{
    opacity: 1;
}

.mok-attach-add 
{ 
    font-size: 32px;
    line-height: 1;
}





.mok-attach-pdf { font-weight: 700; letter-spacing: .06em; opacity: .9; }
.mok-attach-remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: rgba(0,0,0,.6); color: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; }

.mok-viewer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 1050; display: flex; align-items: stretch; justify-content: stretch; }
.mok-viewer { position: relative; width: 100vw; height: 100vh; background: #0e0e0e; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mok-viewer-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.mok-viewer-body { width: 100%; height: 100%; border: 0; object-fit: contain; background: #0e0e0e; }
.mok-viewer-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.45); color: rgba(255,255,255,.95); font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.mok-viewer-close:hover { background: rgba(0,0,0,.65); }
.mok-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.45); color: rgba(255,255,255,.95); font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.mok-viewer-nav:hover { background: rgba(0,0,0,.65); }
.mok-viewer-nav-left { left: 14px; }
.mok-viewer-nav-right { right: 14px; }
.mok-viewer-caption { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.55); color: rgba(255,255,255,.95); font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }