html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #363B44;
    overflow-x: hidden;
}

#icons {
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
}

#application {
    display: contents;
}

.main-content {
    position: absolute;
    top: 32px;
    left: calc(50% - 171px);
    width: 342px;
    padding-bottom: 300px;
    overflow-x: hidden;
}

.buttons-popup {
    position: fixed;
    bottom: 20px;
    left: calc(50% - 181px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 362px;
    border-radius: 24px;
    padding: 12px 10px;
    box-shadow: 0 0 10px 0 #0000001A;
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
}

.buttons-popup__caption {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: -3px;
}

.buttons-popup__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.buttons-popup__buttons a {
    text-decoration: none;
}

.buttons-popup__provider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    opacity: 0.4;
    font-weight: 600;
    font-size: 10px;
    margin-bottom: 2px;
    text-decoration: none;
    color: inherit;
}

.buttons-popup__provider:hover {
    opacity: 1.0;
}

.messenger-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    padding: 12px 18px;
    border-radius: 12px;
    line-height: 1;
    height: 48px;
    box-sizing: border-box;
    cursor: pointer;
}

.messenger-button.messenger-button__telegram {
    gap: 8px;
    background: #2BABEE;
}

.messenger-button.messenger-button__telegram:is(:hover, :active) {
    background: #249AD8;
}

.messenger-button.messenger-button__max {
    gap: 8px;
    background: linear-gradient(90deg, #43D6FF 0%, #5A8CFF 50.48%, #8F3FFF 100%);
}

.messenger-button.messenger-button__max:is(:hover, :active) {
    background: linear-gradient(90deg, #2EBFE8 0%, #4A77E0 50.48%, #7C35DE 100%);
}

.messenger-button.messenger-button__whatsapp {
    gap: 8px;
    background: #25D366;
}

.messenger-button.messenger-button__whatsapp:is(:hover, :active) {
    background: #20B959;
}

.contacts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 10px;
    background: #F5F5F5;
}

.contacts figure {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 8px;
    font-weight: 500;
}

.contacts figcaption {
    font-weight: 600;
}

.contacts figure img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.contacts a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #0A0A0A;
}

.contacts a:not([href]) {
    opacity: 0.3;
}

.template {
    font-family: 'PT Sans', sans-serif;
}

.template .template__content {
    padding: 8px;
    border-radius: 10px;
    background: #F5F5F5;
}

.template .template__button {
    font-size: 13px;
    text-align: center;
    color: #A8A8A8;
    background: #F5F5F5;
    padding: 6px;
    border-radius: 10px;
    line-height: 20px;
}

.template, .template .template__buttons {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.template .template__header.header--text {
    font-weight: 600;
    font-size: 16px;
    padding: 0 2px 2px 2px;
    margin-bottom: 4px;
}

.template .template__header:is(.header--image, .header--video, .header--gif, .header--document, .header--location) {
    position: relative;
    height: 162px;
    margin-bottom: 4px;
    border-radius: 5px;
    background: white;
}

.template .template__header.header--video svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.template .template__header.header--document {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.template .template__header.header--document span {
    font-size: 15px;
    line-height: 19.41px;
    word-break: break-all;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template .template__header img, video {
    border-radius: inherit;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.template .template__body {
    padding: 0 2px 2px 2px;
    line-height: 20px;
    word-break: break-word;
    white-space: break-spaces;
}

.template .template__footer {
    margin-top: 4px;
    padding: 0 2px 2px 2px;
    color: #6b6d72;
    font-size: 13px;
}

.template .template__carousel {
    /* Nothing */
}

.template .template__carousel .carousel__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.template .catalog {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.template .catalog .catalog__thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    border-radius: 4px;
	overflow: hidden;
    flex: 0 0 auto;
    background-color: #FFFFFF;
}

.template .catalog .catalog__description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 0 4px 0;
    color: #949492;
    font-size: 12px;
    line-height: 130%;
    text-wrap: balance;
}

.template .catalog .catalog__description strong {
    font-weight: 600;
    color: #010101;
    font-size: 13px;
    line-height: 130%;
}

.template .promocode {
    height: 61px;
    display: flex;
    align-items: center;
    padding: 6px;
    gap: 10px;
    background-color: #FBFBFB;
    border-radius: 0 0 5px 5px;
    margin-bottom: 4px;
}

.template .promocode__picture {
    width: 49px;
    height: 49px;
    border: 12px solid transparent;
    background-color: white;
    border-radius: 49px;
    box-sizing: border-box;
}

.template .promocode__info {
    display: flex;
    flex-direction: column;
}

.template .promocode__title {
    height: 17px;
    font-size: 13px;
    font-weight: 700;
    color: black;
}

.template .promocode__code,
.template .promocode__expiration-time {
    height: 16px;
    font-size: 12px;
    color: #6E6E6E;
}

.template .promocode__marker {
    color: #6b6d72;
    text-decoration: none;
    border-bottom: 1px dotted #6b6d72;
    overflow-wrap: break-word;
}

body.loading #application {
    display: none;
}