/* Прелоадер */

.t-body {
    overflow: hidden;
    opacity: 0;
    transition: opacity .5s linear;
}

.uc-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
}

.uc-preloader.hidden {
    top: -120vh;
    transition: top 1000ms linear;
}

.barcode::after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url("https://static.tildacdn.com/tild3066-6465-4338-b432-383231316362/barcode.svg") center / cover no-repeat;
    opacity: 10%;
}

.barcode .tn-atom {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    transition: clip-path 2s linear;
}

.barcode .tn-atom.loaded {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}


/* Облако */

.digital-cloud {
    zoom: 1 !important;
    user-select: none;
    cursor: none;
}

.digital-cloud .tn-atom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 590px;
    overflow: hidden;
}

.digital-cloud .exception {
    display: inline-block;
    padding: 0 5px;
}

.digital-cloud span {
    width: 10px;
}

.digital-cloud .tn-atom span.active {
    background-color: transparent;
}

.digital-cloud .tn-atom span.static {
    color: #F15731;
}

.digital-cloud .tn-atom span.hover {
    background-color: #F15731;
    color: #ffffff;
}

.digital-cloud::after {
    content: '';
    position: absolute;
    inset: -1%;
    display: block;
    width: 102%;
    height: 102%;
    box-shadow: inset 0px 0px 80px 80px #ffffff;
    pointer-events: none;
}


/* Светлая и темная кнопки */

.modern-button-light,
.modern-button-dark {
    --button-animation-timing: 200ms; /* Скорость анимации при наведении */
    cursor: pointer;
}

.modern-button-light .tn-elem::before,
.modern-button-dark .tn-elem::before {
    content: '';
    position: absolute;
    inset: 7px 0;
    z-index: 2;
}

.modern-button-light .tn-elem::before {
    border-left: 2px solid #0d0d0d;
    border-right: 2px solid #0d0d0d;
}

.modern-button-dark .tn-elem::before {
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}

#allrecords .modern-button-light .tn-elem:nth-child(2) .tn-atom,
#allrecords .modern-button-dark .tn-elem:nth-child(2) .tn-atom {
    border-left: 0;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

#allrecords .modern-button-light .tn-elem:nth-child(2) .tn-atom {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_456_56)'%3E%3Cline x1='9.35363' y1='0.650352' x2='0.363396' y2='9.64449' stroke='%23ffffff'/%3E%3Crect width='10' height='1' fill='%23ffffff'/%3E%3Crect x='9' width='1' height='10' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_456_56'%3E%3Crect width='10' height='10' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
}

#allrecords .modern-button-dark .tn-elem:nth-child(2) .tn-atom {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_456_56)'%3E%3Cline x1='9.35363' y1='0.650352' x2='0.363396' y2='9.64449' stroke='%23212121'/%3E%3Crect width='10' height='1' fill='%23212121'/%3E%3Crect x='9' width='1' height='10' fill='%23212121'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_456_56'%3E%3Crect width='10' height='10' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
}

#allrecords .modern-button-light:hover .tn-elem:nth-child(2) .tn-atom,
#allrecords .modern-button-dark:hover .tn-elem:nth-child(2) .tn-atom {
    background-position: 70% 30%;
}

#allrecords .modern-button-light:hover .tn-elem:nth-child(2) .tn-atom {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_456_56)'%3E%3Cline x1='9.35363' y1='0.650352' x2='0.363396' y2='9.64449' stroke='%23F15731'/%3E%3Crect width='10' height='1' fill='%23F15731'/%3E%3Crect x='9' width='1' height='10' fill='%23F15731'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_456_56'%3E%3Crect width='10' height='10' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
}

#allrecords .modern-button-dark:hover .tn-elem:nth-child(2) .tn-atom {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_456_56)'%3E%3Cline x1='9.35363' y1='0.650352' x2='0.363396' y2='9.64449' stroke='%23F15731'/%3E%3Crect width='10' height='1' fill='%23F15731'/%3E%3Crect x='9' width='1' height='10' fill='%23F15731'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_456_56'%3E%3Crect width='10' height='10' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
}

#allrecords .modern-button-light .tn-molecule .tn-elem .tn-atom,
#allrecords .modern-button-dark .tn-molecule .tn-elem .tn-atom {
    transition: color var(--button-animation-timing) ease-in-out,
                border-color var(--button-animation-timing) ease-in-out,
                background-image var(--button-animation-timing) ease-in-out,
                background-position var(--button-animation-timing) ease-in-out;
}

#allrecords .modern-button-light:hover .tn-molecule .tn-elem .tn-atom,
#allrecords .modern-button-dark:hover .tn-molecule .tn-elem .tn-atom {
    border-color: #F15731;
    color: #F15731;
}


@media screen and (min-width: 1200px) {
    .digital-cloud {
        width: fit-content !important;
    }
}

@media screen and (max-width: 1199px) {
    .digital-cloud {
        display: block;
        overflow: hidden;
    }

    .digital-cloud .tn-atom {
        width: 100%;
    }

    .digital-cloud span {
        width: 8px;
    }

    #allrecords .modern-button .tn-elem:nth-child(2) .tn-atom {
        background-size: 25%;
    }
}