@font-face {
    font-family: "Gilroy";
    src: url('/fonts/gilroy-light.woff2') format('woff2'), url('/fonts/gilroy-light.woff') format('woff'), url('/fonts/gilroy-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Beware";
    src: url('/fonts/beware-regular.woff2') format('woff2'), url('/fonts/beware-regular.woff') format('woff'), url('/fonts/beware-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Card";
    src: url('/fonts/card-regular.woff2') format('woff2'), url('/fonts/card-regular.woff') format('woff'), url('/fonts/card-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Candara";
    src: url('/fonts/candara.woff2') format('woff2'), url('/fonts/candara.woff') format('woff'), url('/fonts/candara.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Gabriola";
    src: url('/fonts/gabriola.woff2') format('woff2'), url('/fonts/gabriola.woff') format('woff'), url('/fonts/gabriola.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Arial";
    src: url('/fonts/arial.woff2') format('woff2'), url('/fonts/arial.woff') format('woff'), url('/fonts/arial.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Bookman Old Style";
    src: url('/fonts/bookmanoldstyle.woff2') format('woff2'), url('/fonts/bookmanoldstyle.woff') format('woff'), url('/fonts/bookmanoldstyle.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}




/* с русск проблема */
@font-face {
    font-family: "Baskerville Old Face";
    src: url('/fonts/baskervilleoldface.woff2') format('woff2'), url('/fonts/baskervilleoldface.woff') format('woff'), url('/fonts/baskervilleoldface.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}




@font-face {
    font-family: "Calibri";
    src: url('/fonts/calibri.woff2') format('woff2'), url('/fonts/calibri.woff') format('woff'), url('/fonts/calibri.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Candara";
    src: url('/fonts/candara.woff2') format('woff2'), url('/fonts/candara.woff') format('woff'), url('/fonts/candara.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Comic";
    src: url('/fonts/comic.woff2') format('woff2'), url('/fonts/comic.woff') format('woff'), url('/fonts/comic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Consolas";
    src: url('/fonts/consolas.woff2') format('woff2'), url('/fonts/consolas.woff') format('woff'), url('/fonts/consolas.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Georgia";
    src: url('/fonts/georgia.woff2') format('woff2'), url('/fonts/georgia.woff') format('woff'), url('/fonts/georgia.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Impact";
    src: url('/fonts/impact.woff2') format('woff2'), url('/fonts/impact.woff') format('woff'), url('/fonts/impact.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Mistral";
    src: url('/fonts/mistral.woff2') format('woff2'), url('/fonts/mistral.woff') format('woff'), url('/fonts/mistral.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Tahoma";
    src: url('/fonts/tahoma.woff2') format('woff2'), url('/fonts/tahoma.woff') format('woff'), url('/fonts/tahoma.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Verdana";
    src: url('/fonts/verdana.woff2') format('woff2'), url('/fonts/verdana.woff') format('woff'), url('/fonts/verdana.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Franklin Gothic Medium";
    src: url('/fonts/franklingothicmedium.woff2') format('woff2'), url('/fonts/franklingothicmedium.woff') format('woff'), url('/fonts/franklingothicmedium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Century Gothic";
    src: url('/fonts/сenturygothic.woff2') format('woff2'), url('/fonts/сenturygothic.woff') format('woff'), url('/fonts/сenturygothic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Lucida Sans Unicode";
    src: url('/fonts/lucidasansunicode.woff2') format('woff2'), url('/fonts/lucidasansunicode.woff') format('woff'), url('/fonts/lucidasansunicode.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Lucida Console";
    src: url('/fonts/lucidaconsole.woff2') format('woff2'), url('/fonts/lucidaconsole.woff') format('woff'), url('/fonts/lucidaconsole.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Montserrat Medium";
    src: url('/fonts/montserrat-medium.woff2') format('woff2'), url('/fonts/montserrat-medium.woff') format('woff'), url('/fonts/montserrat-medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Segoe Script";
    src: url('/fonts/segoe-script.woff2') format('woff2'), url('/fonts/segoe-script.woff') format('woff'), url('/fonts/segoe-script.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Segoe UI";
    src: url('/fonts/segoe-ui.woff2') format('woff2'), url('/fonts/segoe-ui.woff') format('woff'), url('/fonts/segoe-ui.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}



@font-face {
    font-family: "MS Sans Serif";
    src: url('/fonts/microsoftsansserif.woff2') format('woff2'), url('/fonts/microsoftsansserif.woff') format('woff'), url('/fonts/microsoftsansserif.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}




@font-face {
    font-family: "Sitka Subheading";
    src: url('/fonts/sitka-subheading.woff2') format('woff2'), url('/fonts/sitka-subheading.woff') format('woff'), url('/fonts/sitka-subheading.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}



@font-face {
    font-family: "Times New Roman";
    src: url('/fonts/timesnrcyrmt.woff2') format('woff2'), url('/fonts/timesnrcyrmt.woff') format('woff'), url('/fonts/timesnrcyrmt.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}









.adm-preview-card {
    margin: 10px;
    position: relative;
    width: 16.9375vw;
    height: 10.68586875vw;
    margin-bottom: 1.875vw;
    border-radius: 1.02019375vw;
    overflow: hidden;
}
.adm-card-sideb  .visual__card-side-b-magnetic-stripe {
        position: absolute;
        top: 7.27%;
        left: 0;
        width: 100%;
        height: 23.64%;
        z-index: 400;
        user-select: none;
        pointer-events: none;
        background: #adadad;
}
.adm-card-sideb .visual__card-side-b-signature-stripe {
    position: absolute;
    bottom: 43%;
    left: 4.71%;
    width: 75.29%;
    height: 16.99%;
    z-index: 400;
    user-select: none;
    pointer-events: none;
    background: #fff;
}
.adm-card-side-a-chip_small {
    width: 11.9048%;
    height: 15.0943%;
    position: absolute;
    top: 30.9%;
    left: 10.59%;
    z-index: 400;
    user-select: none;
    pointer-events: none;
}

.adm-preview-card.preview-card_black-gold-mat svg,
.adm-preview-card.preview-card_black-gold-rib svg {
    color: transparent;
    filter: invert(71%) sepia(54%) saturate(330%) hue-rotate(6deg) brightness(95%) contrast(88%);
}
.adm-preview-card.preview-card_red svg,
.adm-preview-card.preview-card_gold-white-mat svg,
.adm-preview-card.preview-card_blue svg,
.adm-preview-card.preview-card_green svg,
.adm-preview-card.preview-card_gold-mirror svg
{
    color: transparent;
    filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);
}
.adm-preview-card.preview-card_black-silver-mat svg {
    filter: invert(99%) sepia(3%) saturate(1094%) hue-rotate(224deg) brightness(113%) contrast(81%);
}
.adm-preview-card.preview-card_silver-white-mat svg
{
    color: transparent;
    filter: invert(71%) sepia(99%) saturate(1%) hue-rotate(314deg) brightness(103%) contrast(107%);
}
.adm-preview-card.preview-card_silver-black-mat svg
{
    color: transparent;
    filter: invert(24%) sepia(1%) saturate(2254%) hue-rotate(8deg) brightness(97%) contrast(81%);
}
.adm-preview-card.preview-card_gold-black-mat svg
{
    color: transparent;
    filter: invert(14%) sepia(59%) saturate(5401%) hue-rotate(51deg) brightness(103%) contrast(97%);
}
.adm-preview-card.preview-card_blue_black svg
{
    color: transparent;
    filter: invert(14%) sepia(59%) saturate(5401%) hue-rotate(51deg) brightness(103%) contrast(97%);
}
.adm-preview-card.preview-card_silver-white svg {
    color: transparent;
    filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);
}
.adm-preview-card.preview-card_silver-black svg {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
}
.adm-preview-card.preview-card_gold-white svg {
    color: transparent;
    filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);
}
.adm-preview-card.preview-card_gold-black svg {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
}
.adm-preview-card.preview-card_rose-white svg {
    color: transparent;
    filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);
}
.adm-preview-card.preview-card_rose-black svg {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
}
.adm-preview-card.preview-card_rainbow-white svg {
    color: transparent;
    filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);
}
.adm-preview-card.preview-card_rainbow-black svg {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
}
.adm-preview-card.preview-card_silver-white svg {
    color: transparent;
    filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);
}
.adm-preview-card.preview-card_silver-black svg {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
}
.adm-preview-card.preview-card_blue {
    color: #f2f2f2;
    background: linear-gradient(90deg, #017597 0%, #0198BB 50%, #0099C2 100%);
}
.adm-preview-card.preview-card_blue_black {
    color: #634204;
    background: linear-gradient(90deg, #017597 0%, #0198BB 50%, #0099C2 100%);
}
.adm-preview-card.preview-card_silver-white-mat {
    color: #E8E7E7;
    background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%);
}
.adm-preview-card.preview-card_silver-black-mat {
    color: #4A4946;
    background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%);
}

/*
adm
 */


/* Синий/черн гравир.
- background: linear-gradient(90deg, #017597 0%, #0198BB 50%, #0099C2 100%) / #FFFFFF */

.visual #blue_black-card-label .visual__color-label-color,
#blue_black-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #017597 0%, #0198BB  50%, #634204 50%, #634204 100%);

}

#blue_black-card:checked~.visual #blue_black-card-label::after {
    opacity: 1;
}

#blue-card:checked~.visual #blue-card-state {
    display: inline-block;
}
.preview-card_blue_black .preview-card-img-cont,
.visual__card_blue_black .visual__card-side-a-picture img,
.visual__card_green .visual__card-side-a-picture img {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);  цвет гравировки, оставить для белых*/
    filter: invert(14%) sepia(59%) saturate(5401%) hue-rotate(51deg) brightness(103%) contrast(97%);
}
.visual .visual__card_blue_black .visual__card-side-a,
.visual .visual__card_blue_black .visual__card-side-b,
.buy-pop__inner .preview .preview-card_blue_black {
    color: #634204;
    background: linear-gradient(90deg, #017597 0%, #0198BB 50%, #0099C2 100%);
}
.visual .visual__card_blue_black .visual__card-side-a .fillable,
.visual .visual__card_blue_black .visual__card-side-a .svgdevtextmc,
.visual .visual__card_blue_black .visual__card-side-b .fillable,
.visual .visual__card_blue_black .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_blue_black .fillable,
.buy-pop__inner .preview .preview-card_blue_black .svgdevtextmc {
    fill: #634204;
}
.visual .visual__card_blue_black .visual__card-side-a .strokable,
.visual .visual__card_blue_black .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_blue_black .strokable {
    stroke: #634204;
}
/* -----------------------------------------------*/











/* Серебро/светло-серый - background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%) / #E8E7E7 -----------------------------   */

.adm-preview-card.preview-card_metal-black-silver svg {
    color: transparent;
    /*filter: invert(90%);*/
}

.visual #metal-black-silver-card-label .visual__color-label-color,
#metal-black-silver-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #B4A8A3 0%, #B4A8A3  50%, #E8E7E7 50%, #E8E7E7 100%); /* цвет значка в выборе цвета */
}
.visual .visual__card_metal-black-silver .visual__card-side-a,
.visual .visual__card_metal-black-silver .visual__card-side-b,
.buy-pop__inner .preview .preview-card_metal-black-silver {
    color: #ff0398; /* цвет текста не меняемого (напр номер карты) */
    background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%); /* цвет фона */
}
.visual .visual__card_metal-black-silver .visual__card-side-a .fillable,
.visual .visual__card_metal-black-silver .visual__card-side-a .svgdevtextmc,
.visual .visual__card_metal-black-silver .visual__card-side-b .fillable,
.visual .visual__card_metal-black-silver .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_metal-black-silver .fillable,
.buy-pop__inner .preview .preview-card_metal-black-silver .svgdevtextmc {
    fill: #ff0398;
}

.visual .visual__card_metal-black-silver .visual__card-side-a .strokable,
.visual .visual__card_metal-black-silver .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_metal-black-silver .strokable {
    stroke: #ff0398;
}

#metal-black-silver-card:checked~.visual #metal-black-silver-card-label::after {
    opacity: 1;
}

#metal-black-silver-card:checked~.visual #metal-black-silver-card {
    display: inline-block;
}
.preview-card_metal-black-silver .preview-card-img-cont,
.visual__card_metal-black-silver .visual__card-side-a-picture img {
    color: transparent;
    filter: invert(50%);  /* работа с цветом гравировки */
}



/* ------------------------
Чёрный/серебр.гравир. - #000000 / #E8E7E7;
Чёрный/золот.гравир. - #000000 /#D3B559
-----------------------------------------------------*/







/* ------------------------
black-silver-mat Чёрный/серебр.гравир. - #000000 / #E8E7E7; - filter: invert(99%) sepia(3%) saturate(1094%) hue-rotate(224deg) brightness(113%) contrast(81%);
black-gold-mat Чёрный/золот.гравир. - #000000 /#D3B559 - filter: invert(77%) sepia(35%) saturate(602%) hue-rotate(4deg) brightness(90%) contrast(88%);


silver-white-mat Серебро/светло-серый - background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%) / #E8E7E7  - filter: invert(71%) sepia(99%) saturate(1%) hue-rotate(314deg) brightness(103%) contrast(107%);
silver-black-mat Серебро/тёмно-серый - background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%) / #4A4946 - filter: invert(24%) sepia(1%) saturate(2254%) hue-rotate(8deg) brightness(97%) contrast(81%);


gold-white-mat Золото/светло-серый - background: linear-gradient(90deg, #8E6A27 0%, #D3B559 63.62%, #A17E31 100%) / #E8E7E7  - filter: invert(71%) sepia(99%) saturate(1%) hue-rotate(314deg) brightness(103%) contrast(107%);
Золото/темно-коричн. - background: linear-gradient(90deg, #8E6A27 0%, #D3B559 63.62%, #A17E31 100%) / #634204
black_blue Синий/белая гравир. - background: linear-gradient(90deg, #017597 0%, #0198BB 50%, #0099C2 100%) / #FFFFFF - filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(305deg) brightness(102%) contrast(102%);
blue Синий/темно-коричн - background: linear-gradient(90deg, #017597 0%, #0198BB 50%, #0099C2 100%) / #634204 - filter: invert(14%) sepia(59%) saturate(5401%) hue-rotate(51deg) brightness(103%) contrast(97%);
---------------------
https://codepen.io/lidianesegura/pen/NQYQpN
--------------------------------*/

.visual #black-silver-mat-card-label .visual__color-label-color,
#black-silver-mat-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #040404 0%, #040404 50%, #E8E7E7 50%, #E8E7E7 100%);
}

#black-silver-mat-card:checked~.visual #black-silver-mat-card-label::after {
    opacity: 1;
}

#black-silver-mat-card:checked~.visual #black-silver-mat-card-state {
    display: inline-block;
}

.visual__card {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.visual .visual__card_black-silver-mat .visual__card-side-a,
.visual .visual__card_black-silver-mat .visual__card-side-b,
.buy-pop__inner .preview .preview-card_black-silver-mat {
    color: #E8E7E7;
    background: linear-gradient(113.06deg, #040404 7.79%, #2D2E2E 50.83%, #040404 96.64%);
}
.preview-card_black-silver-mat {
    color: #E8E7E7;
    background: linear-gradient(113.06deg, #040404 7.79%, #2D2E2E 50.83%, #040404 96.64%);
}

.visual .visual__card_black-silver-mat .visual__card-side-a .fillable,
.visual .visual__card_black-silver-mat .visual__card-side-a .svgdevtextmc,
.visual .visual__card_black-silver-mat .visual__card-side-b .fillable,
.visual .visual__card_black-silver-mat .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_black-silver-mat .fillable,
.buy-pop__inner .preview .preview-card_black-silver-mat .svgdevtextmc {
    fill: #E8E7E7;
}

.visual .visual__card_black-silver-mat .visual__card-side-a .strokable,
.visual .visual__card_black-silver-mat .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_black-silver-mat .strokable {
    stroke: #E8E7E7;
}

.visual #black-gold-mat-card-label .visual__color-label-color,
#black-gold-mat-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #040404 0%, #040404 50%, #D3B559 50%, #D3B559 100%);
}

#black-gold-mat-card:checked~.visual #black-gold-mat-card-label::after {
    opacity: 1;
}

#black-gold-mat-card:checked~.visual #black-gold-mat-card-state {
    display: inline-block;
}

.preview-card_black-gold-mat .preview-card-img-cont,
.preview-card_black-gold-rib .preview-card-img-cont,
.visual__card_black-gold-rib .visual__card-side-a-picture img,
.visual__card_black-gold-mat .visual__card-side-a-picture img {
    color: transparent;
    filter: invert(77%) sepia(35%) saturate(602%) hue-rotate(4deg) brightness(90%) contrast(88%);
}

.preview-card_red .preview-card-img-cont,
.preview-card_gold-white-mat .preview-card-img-cont,
.preview-card_blue .preview-card-img-cont,
.preview-card_green .preview-card-img-cont,
.preview-card_gold-mirror .preview-card-img-cont,
.visual__card_red .visual__card-side-a-picture img,
.visual__card_blue .visual__card-side-a-picture img,
.visual__card_green .visual__card-side-a-picture img,
.visual__card_gold-mirror .visual__card-side-a-picture img {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
    filter: invert(71%) sepia(99%) saturate(1%) hue-rotate(314deg) brightness(103%) contrast(107%);
}

.preview-card_black-silver-mat .preview-card-img-cont,
.visual__card_black-silver-mat .visual__card-side-a-picture img {
    color: transparent;
    filter: invert(99%) sepia(3%) saturate(1094%) hue-rotate(224deg) brightness(113%) contrast(81%);
}

.preview-card_silver-white-mat .preview-card-img-cont {
    color: transparent;
    filter: invert(71%) sepia(99%) saturate(1%) hue-rotate(314deg) brightness(103%) contrast(107%);
}
.preview-card_silver-black-mat .preview-card-img-cont {
    color: transparent;
    filter: invert(24%) sepia(1%) saturate(2254%) hue-rotate(8deg) brightness(97%) contrast(81%);
}
.preview-card_gold-black-mat .preview-card-img-cont {
    color: transparent;
    filter: invert(14%) sepia(59%) saturate(5401%) hue-rotate(51deg) brightness(103%) contrast(97%);
}


.visual .visual__card_black-gold-mat .visual__card-side-a,
.visual .visual__card_black-gold-mat .visual__card-side-b,
.buy-pop__inner .preview .preview-card_black-gold-mat {
    color: #d5b869;
    background: linear-gradient(113.06deg, #040404 7.79%, #2D2E2E 50.83%, #040404 96.64%);
}
.preview-card_black-gold-mat {
    color: #D3B559;
    background: #000000;
}

.visual .visual__card_black-gold-mat .visual__card-side-a .fillable,
.visual .visual__card_black-gold-mat .visual__card-side-a .svgdevtextmc,
.visual .visual__card_black-gold-mat .visual__card-side-b .fillable,
.visual .visual__card_black-gold-mat .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_black-gold-mat .fillable,
.buy-pop__inner .preview .preview-card_black-gold-mat .svgdevtextmc {
    fill: #D3B559;
}

.visual .visual__card_black-gold-mat .visual__card-side-a .strokable,
.visual .visual__card_black-gold-mat .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_black-gold-mat .strokable {
    stroke: #D3B559;
}

.visual #gold-mirror-card-label .visual__color-label-color,
#gold-mirror-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #FED760 0%, #9E761B 50%, #DFDFDF 50%, #DFDFDF 100%);
}

#gold-mirror-card:checked~.visual #gold-mirror-card-label::after {
    opacity: 1;
}

#gold-mirror-card:checked~.visual #gold-mirror-card-state {
    display: inline-block;
}

.visual .visual__card_gold-mirror .visual__card-side-a,
.visual .visual__card_gold-mirror .visual__card-side-b,
.buy-pop__inner .preview .preview-card_gold-mirror {
    color: #f2f2f2;
    background: linear-gradient(113.06deg, #A87234 7.79%, #FED760 30.47%, #AB7F42 55%, #D1A751 78.6%, #A0763C 96.64%);
}
.preview-card_gold-mirror {
    color: #f2f2f2;
    background: linear-gradient(113.06deg, #A87234 7.79%, #FED760 30.47%, #AB7F42 55%, #D1A751 78.6%, #A0763C 96.64%);
}

.visual .visual__card_gold-mirror .visual__card-side-a .fillable,
.visual .visual__card_gold-mirror .visual__card-side-a .svgdevtextmc,
.visual .visual__card_gold-mirror .visual__card-side-b .fillable,
.visual .visual__card_gold-mirror .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_gold-mirror .fillable,
.buy-pop__inner .preview .preview-card_gold-mirror .svgdevtextmc {
    fill: #f2f2f2;
}

.visual .visual__card_gold-mirror .visual__card-side-a .strokable,
.visual .visual__card_gold-mirror .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_gold-mirror .strokable {
    stroke: #f2f2f2;
}

.visual #gold-mirror-black-card-label .visual__color-label-color,
#gold-mirror-black-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #FED760 0%, #9E761B 50%, #040404 50%, #040404 100%);
}

#gold-mirror-black-card:checked~.visual #gold-mirror-black-card-label::after {
    opacity: 1;
}

#gold-mirror-black-card:checked~.visual #gold-mirror-black-card-state {
    display: inline-block;
}

.visual .visual__card_gold-mirror-black .visual__card-side-a,
.visual .visual__card_gold-mirror-black .visual__card-side-b,
.buy-pop__inner .preview .preview-card_gold-mirror-black {
    color: #202020;
    background: linear-gradient(113.06deg, #A87234 7.79%, #FED760 30.47%, #AB7F42 55%, #D1A751 78.6%, #A0763C 96.64%);
}
.preview-card_gold-mirror-black {
    color: #202020;
    background: linear-gradient(113.06deg, #A87234 7.79%, #FED760 30.47%, #AB7F42 55%, #D1A751 78.6%, #A0763C 96.64%);
}

.visual .visual__card_gold-mirror-black .visual__card-side-a .fillable,
.visual .visual__card_gold-mirror-black .visual__card-side-a .svgdevtextmc,
.visual .visual__card_gold-mirror-black .visual__card-side-b .fillable,
.visual .visual__card_gold-mirror-black .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_gold-mirror-black .fillable,
.buy-pop__inner .preview .preview-card_gold-mirror-black .svgdevtextmc {
    fill: #202020;
}

.visual .visual__card_gold-mirror-black .visual__card-side-a .strokable,
.visual .visual__card_gold-mirror-black .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_gold-mirror-black .strokable {
    stroke: #202020;
}

.visual #black-gold-rib-card-label .visual__color-label-color,
#black-gold-rib-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(113.06deg, #646464 7.79%, #393939 50.37%, #6F6F6F 96.64%);
}

#black-gold-rib-card:checked~.visual #black-gold-rib-card-label::after {
    opacity: 1;
}

#black-gold-rib-card:checked~.visual #black-gold-rib-card-state {
    display: inline-block;
    color: #000000;
}

.visual .visual__card_black-gold-rib .visual__card-side-a,
.visual .visual__card_black-gold-rib .visual__card-side-b,
.buy-pop__inner .preview .preview-card_black-gold-rib {
    color: #d5b869;
    background: url(/images/black-rib-back.jpg) 0 0 / cover no-repeat;
}
.preview-card_black-gold-rib {
    color: #d5b869;
    background: url(/images/black-rib-back.jpg) 0 0 / cover no-repeat;
}

.visual .visual__card_black-gold-rib .visual__card-side-a .fillable,
.visual .visual__card_black-gold-rib .visual__card-side-a .svgdevtextmc,
.visual .visual__card_black-gold-rib .visual__card-side-b .fillable,
.visual .visual__card_black-gold-rib .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_black-gold-rib .fillable,
.buy-pop__inner .preview .preview-card_black-gold-rib .svgdevtextmc {
    fill: url(index.html);
}

.visual .visual__card_black-gold-rib .visual__card-side-a .strokable,
.visual .visual__card_black-gold-rib .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_black-gold-rib .strokable {
    stroke: url(index.html);
}
/*
        .visual #red-card-label .visual__color-label-color,
        #red-card:checked~.visual .visual__color-container-state-btn-color {
            background: linear-gradient(161deg, #bfbbb0 0%, #bfbbb0 50%, #bfbbb0 100%);
        }

        #red-card:checked~.visual #red-card-label::after {
            opacity: 1;
        }

        #red-card:checked~.visual #red-card-state {
            display: inline-block;
        }

        .visual .visual__card_red .visual__card-side-a,
        .visual .visual__card_red .visual__card-side-b,
        .buy-pop__inner .preview .preview-card_red {
            color: #f2f2f2;
            background: linear-gradient(161deg, #bfbbb0 0%, #bfbbb0 50%, #bfbbb0 100%);
        }

        .visual .visual__card_red .visual__card-side-a .fillable,
        .visual .visual__card_red .visual__card-side-a .svgdevtextmc,
        .visual .visual__card_red .visual__card-side-b .fillable,
        .visual .visual__card_red .visual__card-side-b .svgdevtextmc,
        .buy-pop__inner .preview .preview-card_red .fillable,
        .buy-pop__inner .preview .preview-card_red .svgdevtextmc {
            fill: #f2f2f2;
        }

        .visual .visual__card_red .visual__card-side-a .strokable,
        .visual .visual__card_red .visual__card-side-b .strokable,
        .buy-pop__inner .preview .preview-card_red .strokable {
            stroke: #f2f2f2;
        }
*/
.visual #blue-card-label .visual__color-label-color,
#blue-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #017597 0%, #0198BB  50%, #FFF 50%, #FFF 100%);
}

#blue-card:checked~.visual #blue-card-label::after {
    opacity: 1;
}

#blue-card:checked~.visual #blue-card-state {
    display: inline-block;
}

.visual .visual__card_blue .visual__card-side-a,
.visual .visual__card_blue .visual__card-side-b,
.buy-pop__inner .preview .preview-card_blue {
    color: #f2f2f2;
    background: linear-gradient(90deg, #017597 0%, #0198BB 50%, #0099C2 100%);
}

.visual .visual__card_blue .visual__card-side-a .fillable,
.visual .visual__card_blue .visual__card-side-a .svgdevtextmc,
.visual .visual__card_blue .visual__card-side-b .fillable,
.visual .visual__card_blue .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_blue .fillable,
.buy-pop__inner .preview .preview-card_blue .svgdevtextmc {
    fill: #f2f2f2;
}

.visual .visual__card_blue .visual__card-side-a .strokable,
.visual .visual__card_blue .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_blue .strokable {
    stroke: #f2f2f2;
}

.visual #green-card-label .visual__color-label-color,
#green-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(130.61deg, #FFC0CB 0%, #FFC0CB 50%, #FFC0CB 100%);
}

#green-card:checked~.visual #green-card-label::after {
    opacity: 1;
}

#green-card:checked~.visual #green-card-state {
    display: inline-block;
}

.visual .visual__card_green .visual__card-side-a,
.visual .visual__card_green .visual__card-side-b,
.buy-pop__inner .preview .preview-card_green {
    color: #FFC0CB;
    background: linear-gradient(130.61deg, #FFC0CB 0%, #FFC0CB 50%, #FFC0CB 100%);
}

.visual .visual__card_green .visual__card-side-a .fillable,
.visual .visual__card_green .visual__card-side-a .svgdevtextmc,
.visual .visual__card_green .visual__card-side-b .fillable,
.visual .visual__card_green .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_green .fillable,
.buy-pop__inner .preview .preview-card_green .svgdevtextmc {
    fill: #f2f2f2;
}

.visual .visual__card_green .visual__card-side-a .strokable,
.visual .visual__card_green .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_green .strokable {
    stroke: #f2f2f2;
}

.visual__color-container-inner {
    width: 15vw;
}

@media (max-width: 768px) {
    .visual__color-container-inner {
        width: 55.55555555555556vw;
    }

    #color-state:checked~.visual__color-container-inner {
        height: 96.666666666666664vw
    }
}
.visual__card-side-inscr {
    z-index: 300;
}
/*Матовое серебро белая гравировка*/
.visual #silver-white-mat-card-label .visual__color-label-color,
#silver-white-mat-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #8A837D 0%, #B4A8A3 50%, #E8E7E7 50%, #E8E7E7 100%);
}

#silver-white-mat-card:checked~.visual #silver-white-mat-card-label::after {
    opacity: 1;
}

#silver-white-mat-card:checked~.visual #silver-white-mat-card-state {
    display: inline-block;
}

.preview-card_silver-white .preview-card-img-cont,
.visual__card_silver-white-mat .visual__card-side-a-picture img {
    color: transparent;
    filter: invert(71%) sepia(99%) saturate(1%) hue-rotate(314deg) brightness(103%) contrast(107%);
}
.visual .visual__card_silver-white-mat .visual__card-side-a, .visual .visual__card_silver-white-mat .visual__card-side-b, .buy-pop__inner .preview .preview-card_silver-white-mat {
    color: #E8E7E7;
    background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%);
}
.preview-card_silver-white-mat {
    color: #E8E7E7;
    background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%);
}
/*Матовое серебро черная гравировка*/
.visual #silver-black-mat-card-label .visual__color-label-color,
#silver-black-mat-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #8A837D 0%, #B4A8A3 50%, #4A4946 50%, #4A4946 100%);
}

#silver-black-mat-card:checked~.visual #silver-black-mat-card-label::after {
    opacity: 1;
}

#silver-black-mat-card:checked~.visual #silver-black-mat-card-state {
    display: inline-block;
}

.preview-card_silver-black .preview-card-img-cont,
.visual__card_silver-black-mat .visual__card-side-a-picture img {
    color: transparent;
    filter: invert(24%) sepia(1%) saturate(2254%) hue-rotate(8deg) brightness(97%) contrast(81%);
}
.visual .visual__card_silver-black-mat .visual__card-side-a, .visual .visual__card_silver-black-mat .visual__card-side-b, .buy-pop__inner .preview .preview-card_silver-black-mat {
    color: #4A4946;
    background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%);
}
.preview-card_silver-black-mat {
    color: #4A4946;
    background: linear-gradient(90deg, #8A837D 0%, #B4A8A3 50%, #636057 100%);
}
/*Матовое золото белая гравировка*/
.visual #gold-white-mat-card-label .visual__color-label-color,
#gold-white-mat-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #8E6A27 0%, #D3B559 50%, #E8E7E7 50%, #E8E7E7 100%);
}

#gold-white-mat-card:checked~.visual #gold-white-mat-card-label::after {
    opacity: 1;
}

#gold-white-mat-card:checked~.visual #gold-white-mat-card-state {
    display: inline-block;
}

.preview-card_gold-white .preview-card-img-cont,
.visual__card_gold-white-mat .visual__card-side-a-picture img {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
    filter: invert(71%) sepia(99%) saturate(1%) hue-rotate(314deg) brightness(103%) contrast(107%);
}
.visual .visual__card_gold-white-mat .visual__card-side-a, .visual .visual__card_gold-white-mat .visual__card-side-b, .buy-pop__inner .preview .preview-card_gold-white-mat {
    color: #E8E7E7;
    background: linear-gradient(90deg, #8E6A27 0%, #D3B559 63.62%, #A17E31 100%);
}
.preview-card_gold-white-mat {
    color: #E8E7E7;
    background: linear-gradient(90deg, #8E6A27 0%, #D3B559 63.62%, #A17E31 100%);
}
/*Матовое золото черная гравировка*/
.visual #gold-black-mat-card-label .visual__color-label-color,
#gold-black-mat-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #8E6A27 0%, #D3B559 50%, #634204 50%, #634204 100%);
}

#gold-black-mat-card:checked~.visual #gold-black-mat-card-label::after {
    opacity: 1;
}

#gold-black-mat-card:checked~.visual #gold-black-mat-card-state {
    display: inline-block;
}

.preview-card_gold-black .preview-card-img-cont,
.visual__card_gold-black-mat .visual__card-side-a-picture img {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
    filter: invert(14%) sepia(59%) saturate(5401%) hue-rotate(51deg) brightness(103%) contrast(97%);
}
.visual .visual__card_gold-black-mat .visual__card-side-a, .visual .visual__card_gold-black-mat .visual__card-side-b, .buy-pop__inner .preview .preview-card_gold-black-mat {
    color: #634204;
    background: linear-gradient(90deg, #8E6A27 0%, #D3B559 63.62%, #A17E31 100%);
}
.preview-card_gold-black-mat {
    color: #634204;
    background: linear-gradient(90deg, #8E6A27 0%, #D3B559 63.62%, #A17E31 100%);
}
/*Зеркально розовый белая гравировка*/
.visual #rose-white-mirror-card-label .visual__color-label-color,
#rose-white-mirror-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #976a53 0%, #976a53 50%, #ffffff 50%, #ffffff 100%);
}

#rose-white-mirror-card:checked~.visual #rose-white-mirror-card-label::after {
    opacity: 1;
}

#rose-white-mirror-card:checked~.visual #rose-white-mirror-card-state {
    display: inline-block;
}

.preview-card_rose-white .preview-card-img-cont,
.visual__card_rose-white-mirror .visual__card-side-a-picture img {
    color: transparent;
    filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);

}
.visual .visual__card_rose-white-mirror .visual__card-side-a, .visual .visual__card_rose-white-mirror .visual__card-side-b, .buy-pop__inner .preview .preview-card_rose-white-mirror {
    color: #976a53;
    background: linear-gradient(173deg, #976a53 0%, #e7ccbb 50%, #976a53 100%);
}
.preview-card_rose-white-mirror {
    color: #976a53;
    background: linear-gradient(173deg, #976a53 0%, #e7ccbb 50%, #976a53 100%);
}
/*Зеркально розовый черная гравировка*/
.visual #rose-black-mirror-card-label .visual__color-label-color,
#rose-black-mirror-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #976a53 0%, #976a53 50%, #000000 50%, #000000 100%);
}

#rose-black-mirror-card:checked~.visual #rose-black-mirror-card-label::after {
    opacity: 1;
}

#rose-black-mirror-card:checked~.visual #rose-black-mirror-card-state {
    display: inline-block;
}

.preview-card_rose-black .preview-card-img-cont,
.visual__card_rose-black-mirror .visual__card-side-a-picture img {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
}
.visual .visual__card_rose-black-mirror .visual__card-side-a, .visual .visual__card_rose-black-mirror .visual__card-side-b, .buy-pop__inner .preview .preview-card_rose-black-mirror {
    color: #976a53;
    background: linear-gradient(173deg, #976a53 0%, #e7ccbb 50%, #976a53 100%);
}
.preview-card_rose-black-mirror {
    color: #976a53;
    background: linear-gradient(173deg, #976a53 0%, #e7ccbb 50%, #976a53 100%);
}
/*Зеркальная радуга белая гравировка*/
.visual #rainbow-white-mirror-card-label .visual__color-label-color,
#rainbow-white-mirror-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #E60012 7%, #F39800 14%, #FFF100 21%, #009944 28%, #0068B7 35%, #1D2088 42%, #CFA7CD 50%, #ffffff 50%, #ffffff 100%);
}

#rainbow-white-mirror-card:checked~.visual #rainbow-white-mirror-card-label::after {
    opacity: 1;
}

#rainbow-white-mirror-card:checked~.visual #rainbow-white-mirror-card-state {
    display: inline-block;
}

.preview-card_rainbow-white .preview-card-img-cont,
.visual__card_rainbow-white-mirror .visual__card-side-a-picture img {
    color: transparent;
    filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);
}
.visual .visual__card_rainbow-white-mirror .visual__card-side-a, .visual .visual__card_rainbow-white-mirror .visual__card-side-b, .buy-pop__inner .preview .preview-card_rainbow-white-mirror {
    color: #f2f2f2;
    background: linear-gradient(173deg, #E60012 14%, #F39800 28%, #FFF100 42%, #009944 56%, #0068B7 70%, #1D2088 84%, #CFA7CD 100%);
}
.preview-card_rainbow-white-mirror {
    color: #f2f2f2;
    background: linear-gradient(173deg, #E60012 14%, #F39800 28%, #FFF100 42%, #009944 56%, #0068B7 70%, #1D2088 84%, #CFA7CD 100%);
}
/*Зеркальная радуга черная гравировка*/
.visual #rainbow-black-mirror-card-label .visual__color-label-color,
#rainbow-black-mirror-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #E60012 7%, #F39800 14%, #FFF100 21%, #009944 28%, #0068B7 35%, #1D2088 42%, #CFA7CD 50%, #000000 50%, #000000 100%);
}

#rainbow-black-mirror-card:checked~.visual #rainbow-black-mirror-card-label::after {
    opacity: 1;
}

#rainbow-black-mirror-card:checked~.visual #rainbow-black-mirror-card-state {
    display: inline-block;
}

.preview-card_rainbow-black .preview-card-img-cont,
.visual__card_rainbow-black-mirror .visual__card-side-a-picture img {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
}
.visual .visual__card_rainbow-black-mirror .visual__card-side-a, .visual .visual__card_rainbow-black-mirror .visual__card-side-b, .buy-pop__inner .preview .preview-card_rainbow-black-mirror {
    color: #f2f2f2;
    background: linear-gradient(173deg, #E60012 14%, #F39800 28%, #FFF100 42%, #009944 56%, #0068B7 70%, #1D2088 84%, #CFA7CD 100%);
}
.preview-card_rainbow-black-mirror {
    color: #f2f2f2;
    background: linear-gradient(173deg, #E60012 14%, #F39800 28%, #FFF100 42%, #009944 56%, #0068B7 70%, #1D2088 84%, #CFA7CD 100%);
}
/*Зеркальное серебро белая гравировка*/
.visual #silver-white-mirror-card-label .visual__color-label-color,
#silver-white-mirror-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #C0C0C0 0%, #C0C0C0 50%, #ffffff 50%, #ffffff 100%);
}

#silver-white-mirror-card:checked~.visual #silver-white-mirror-card-label::after {
    opacity: 1;
}

#silver-white-mirror-card:checked~.visual #silver-white-mirror-card-state {
    display: inline-block;
}

.preview-card_silver-white .preview-card-img-cont,
.visual__card_silver-white-mirror .visual__card-side-a-picture img {
    color: transparent;
    filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);
}
.visual .visual__card_silver-white-mirror .visual__card-side-a, .visual .visual__card_silver-white-mirror .visual__card-side-b, .buy-pop__inner .preview .preview-card_silver-white-mirror {
    color: #f2f2f2;
    background: linear-gradient(161deg, #C0C0C0 0%, #C0C0C0 50%, #C0C0C0 100%);
}
.preview-card_silver-white-mirror {
    color: #f2f2f2;
    background: linear-gradient(161deg, #C0C0C0 0%, #C0C0C0 50%, #C0C0C0 100%);
}
/*Зеркальное серебро черная гравировка*/
.visual #silver-black-mirror-card-label .visual__color-label-color,
#silver-black-mirror-card:checked~.visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right, #C0C0C0 0%, #C0C0C0 50%, #000000 50%, #000000 100%);
}

#silver-black-mirror-card:checked~.visual #silver-black-mirror-card-label::after {
    opacity: 1;
}

#silver-black-mirror-card:checked~.visual #silver-black-mirror-card-state {
    display: inline-block;
}

.preview-card_silver-black .preview-card-img-cont,
.visual__card_silver-black-mirror .visual__card-side-a-picture img {
    color: transparent;
    /*filter: invert(100%) sepia(1%) saturate(3006%) hue-rotate(241deg) brightness(115%) contrast(90%);*/
}
.visual .visual__card_silver-black-mirror .visual__card-side-a, .visual .visual__card_silver-black-mirror .visual__card-side-b, .buy-pop__inner .preview .preview-card_silver-black-mirror {
    color: #f2f2f2;
    background: linear-gradient(161deg, #C0C0C0 0%, #C0C0C0 50%, #C0C0C0 100%);
}