.button-red-1 {
    background-image: url("https://utopie-game.ru/assets/icons/button-red-1.png");
    background-repeat: no-repeat;
    background-position: -1px -35px;
    width: 163px;
    height: 32px;

    color: white;
    line-height: 32px;

    border: none;
    text-align: center;
    outline: none !important;

    /* letter-spacing: 1px; */
    text-shadow: 0 2px 2px rgba(0, 0, 0, .5);

    cursor: pointer;
}

.button-red-1:hover {
    width: 163px;
    height: 32px;
    background-position: -1px -69px;
}

.button-red-1:active {
    width: 163px;
    height: 32px;
    background-position: -1px -1px;
}

.button-green-1 {
    background-image: url("https://utopie-game.ru/assets/icons/button-green-1.png");
    background-repeat: no-repeat;
    background-position: -1px -35px;
    width: 163px;
    height: 32px;

    color: white;
    line-height: 32px;

    border: none;
    text-align: center;
    outline: none !important;

    /* letter-spacing: 1px; */
    text-shadow: 0 2px 2px rgba(0, 0, 0, .5);

    cursor: pointer;
}

.button-green-1:hover {
    width: 163px;
    height: 32px;
    background-position: -1px -69px;
    color: white;
}

.button-green-1:active {
    width: 163px;
    height: 32px;
    background-position: -1px -1px;
    color: white;
}


.button-b:not(.select-radio) {
    --s: 0.5;
    /* масштаб */
    --border: #495158;
    --label: #222222;

    --border-thickness: 0px;
    --border-radius: 10px;

    /* normal */


    --frame-top: hsl(0deg 0% 100%);
    --frame-bottom: hsl(203.04deg 8.43% 49.54%);
    --face-top: hsl(210deg 12.42% 85.37%);
    --face-bottom: hsl(207.27deg 10.68% 79.8%);


    --w: 108;
    --h: 64;

    position: relative;
    display: inline-block;
    min-width: calc(var(--w) * 1px * var(--s));
    max-width: calc(var(--w) * 1px * var(--s) * 5);
    height: calc(var(--h) * 1px * var(--s));
    padding: 0 10px;
    margin: 0;
    border: 0;
    appearance: none;
    /* фон «обводки» перенесён в ::before: иначе in-flow текст рисуется ПОД position:absolute (::before), см. CSS2.1 stacking */
    background: transparent;
    background-color: transparent;
    border-radius: calc(11px * var(--s));
    /* обрезка фона/псевдо по скруглению (иначе прямоугольные слои background-image вылезают за дугу) */
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: top;
    cursor: pointer;

    line-height: calc(var(--h) * 1px * var(--s));

    isolation: isolate;
    box-shadow: none !important;


    font-size: 11px;
    color: var(--label) !important;
    text-decoration: none;
    text-align: center;
    /* text-shadow: 0 1px 2px var(--border), 0 1px 1px var(--border); */

    text-shadow: none;
}

/* Специальный фикс для input, если на нем есть класс .button-b */
input.button-b:not(.select-radio) {
    /* Переносим переменные и основные размеры */
    background-color: var(--border);

    /* Собираем пирог из градиентов прямо в фон элемента */
    background-image:
        linear-gradient(180deg, var(--face-top) 0%, var(--face-bottom) 100%),
        linear-gradient(180deg, var(--frame-top) 0%, var(--frame-bottom) 100%);

    /* Настраиваем размеры слоев (имитация отступов из вашего CSS) */
    background-size:
        calc(100% - 20px * var(--s)) calc(100% - 20px * var(--s)),
        calc(100% - 4px * var(--s)) calc(100% - 4px * var(--s));

    background-position: center, center;
    background-repeat: no-repeat;

    /* Имитация box-shadow из ::before и ::after */
    box-shadow: inset 0 0 0 1px var(--border) !important;

    /* Сбрасываем стандартный вид браузера */
    appearance: none;
    -webkit-appearance: none;
}

.button-b:not(.select-radio)::before,
.button-b:not(.select-radio)::after {
    content: "";
    position: absolute;
    display: block;
    pointer-events: none;
}

.button-b.ui-button:active {
    text-shadow: none !important;
}

/*
 * Все слои рисунка в ::before + z-index: -1: тогда слой под непрозрачным фоном самой кнопки не виден,
 * а при transparent фоне кнопки виден ::before, текст — над ним (in-flow выше отрицательного z-index).
 */
.button-b:not(.select-radio)::before {
    --size_margin: 20px;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    background-color: var(--border);
    background-image: linear-gradient(180deg, var(--face-top) 0%, var(--face-bottom) 100%), linear-gradient(180deg, var(--frame-top) 0%, var(--frame-bottom) 100%);
    background-size: calc(100% - var(--size_margin) * var(--s)) calc(100% - var(--size_margin) * var(--s)), calc(100% - 4px * var(--s)) calc(100% - 4px * var(--s));
    background-position: center, center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px var(--border);
}


/* hover */
.button-b:not(.select-radio):hover,
.button-b:not(.select-radio).is-hover {
    --frame-top: hsl(203.04deg 8.43% 92%);
    --frame-bottom: hsl(203.04deg 8.43% 56.5%);
    --face-top: hsl(210deg 12.42% 82.9%);
    --face-bottom: hsl(207.27deg 10.68% 70.6%);
    color: var(--label) !important;
    background-color: var(--border) !important;
}

/* active / pressed */
.button-b:not(.select-radio):active,
.button-b:not(.select-radio).is-active {
    --frame-top: hsl(203.04deg 8.43% 23.9%);
    --frame-bottom: hsl(203.04deg 8.43% 53.7%);
    --face-top: hsl(210deg 12.42% 44.3%);
    --face-bottom: hsl(207.27deg 10.68% 44.3%);
    --label: hsl(210deg 12.42% 85.37%);
}



.button-b:not(.select-radio)::after {
    content: "";
    inset: calc(var(--border-thickness) * var(--s));
    border-radius: calc(var(--border-radius) * var(--s));
    z-index: -1;
    box-shadow: 0 0 0 2px var(--border);
}

.button-b>* {
    position: relative;
    z-index: 1;
}

.button-b.small {
    --h: 48;
    line-height: 24px !important;
    border-radius: 3px !important;
}

.button-b.button-b-full-w {
    --w: 100% !important;
}


/*Серый*/
.button-b.grey,
.button-b.disabled {
    --frame-top: hsl(0deg 0% 100%);
    --frame-bottom: hsl(203.04deg 8.43% 49.54%);
    --face-top: hsl(210deg 12.42% 85.37%);
    --face-bottom: hsl(207.27deg 10.68% 79.8%);
    --label: var(--border);
}

.button-b.grey .button-3d__label {
    text-shadow: 0 1px 2px var(--frame-top), 0 1px 1px var(--frame-top) !important;
}

.button-b.grey:hover,
.button-b.grey.is-hover {
    --frame-top: hsl(203.04deg 8.43% 92%);
    --frame-bottom: hsl(203.04deg 8.43% 56.5%);
    --face-top: hsl(210deg 12.42% 82.9%);
    --face-bottom: hsl(207.27deg 10.68% 70.6%);
    color: var(--label) !important;
}

.button-b.grey:active,
.button-b.grey.is-active {
    --frame-top: hsl(203.04deg 8.43% 23.9%);
    --frame-bottom: hsl(203.04deg 8.43% 53.7%);
    --face-top: hsl(210deg 12.42% 44.3%);
    --face-bottom: hsl(207.27deg 10.68% 44.3%);
    --label: hsl(210deg 12.42% 85.37%);
    color: var(--label) !important;
}

.button-b.disabled:not(.select-radio) {
    cursor: not-allowed;
}

/* Неактивная кнопка: без эффекта наведения и нажатия (перекрывает общие :hover/:active для .button-b) */
.button-b.disabled:not(.select-radio):hover,
.button-b.disabled:not(.select-radio).is-hover,
.button-b.disabled:not(.select-radio):active,
.button-b.disabled:not(.select-radio).is-active {
    cursor: not-allowed;
    --frame-top: hsl(0deg 0% 100%);
    --frame-bottom: hsl(203.04deg 8.43% 49.54%);
    --face-top: hsl(210deg 12.42% 85.37%);
    --face-bottom: hsl(207.27deg 10.68% 79.8%);
    --label: var(--border);
    color: var(--label) !important;
    background-color: transparent !important;
}

/*Зеленый*/
.button-b.green:not(.select-radio) {
    --saturation: 55;
    --hue: 130;
    --l_mult: 0.5;
    --frame-top: hsl(var(--hue) calc(var(--saturation)*2) calc(var(--l_mult) * 150%));
    --frame-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 34.1%));
    --face-top: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 104.4%));
    --face-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 64.9%));
    --label: white !important;
    text-shadow: 0 1px 0 #333, 0 1px 3px #333 !important;
}

.button-b.green:not(.select-radio):hover,
.button-b.green:not(.select-radio).is-hover {
    --l_mult: 0.56;
}

.button-b.green:not(.select-radio):active,
.button-b.green:not(.select-radio).is-active {
    --frame-top: hsl(var(--hue) calc(var(--saturation)*2) calc(var(--l_mult)*23.9%));
    --frame-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*53.7%));
    --face-top: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*44.3%));
    --face-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*44.3%));
}

/*Синий*/
.button-b.blue:not(.select-radio) {
    --saturation: 55;
    --hue: 210;
    --l_mult: 0.5;
    --frame-top: hsl(var(--hue) calc(var(--saturation)*2) calc(var(--l_mult) * 150%));
    --frame-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 34.1%));
    --face-top: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 104.4%));
    --face-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 64.9%));
    --label: white !important;
    text-shadow: 0 1px 0 #333, 0 1px 3px #333 !important;
}

.button-b.blue:not(.select-radio):hover,
.button-b.blue:not(.select-radio).is-hover {
    --l_mult: 0.56;
}

.button-b.blue:not(.select-radio):active,
.button-b.blue:not(.select-radio).is-active {
    --frame-top: hsl(var(--hue) calc(var(--saturation)*2) calc(var(--l_mult)*23.9%));
    --frame-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*53.7%));
    --face-top: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*44.3%));
    --face-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*44.3%));
}

/*Красный*/
.button-b.red:not(.select-radio) {
    --saturation: 55;
    --hue: 4;
    --l_mult: 0.5;
    --frame-top: hsl(var(--hue) calc(var(--saturation)*2) calc(var(--l_mult) * 150%));
    --frame-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 34.1%));
    --face-top: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 104.4%));
    --face-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 64.9%));
    --label: white !important;
    text-shadow: 0 1px 0 #333, 0 1px 3px #333 !important;
}

.button-b.red:not(.select-radio):hover,
.button-b.red:not(.select-radio).is-hover {
    --l_mult: 0.56;
}

.button-b.red:not(.select-radio):active,
.button-b.red:not(.select-radio).is-active {
    --frame-top: hsl(var(--hue) calc(var(--saturation)*2) calc(var(--l_mult)*23.9%));
    --frame-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*53.7%));
    --face-top: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*44.3%));
    --face-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*44.3%));
}

/*Жёлтый*/
.button-b.yellow:not(.select-radio) {
    --saturation: 65;
    --hue: 55;
    --l_mult: 0.5;
    --frame-top: hsl(var(--hue) calc(var(--saturation)*2) calc(var(--l_mult) * 150%));
    --frame-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 34.1%));
    --face-top: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 104.4%));
    --face-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult) * 64.9%));
    --label: white !important;
    text-shadow: 0 1px 0 #333, 0 1px 3px #333 !important;
}

.button-b.yellow:not(.select-radio):hover,
.button-b.yellow:not(.select-radio).is-hover {
    --l_mult: 0.59;
}

.button-b.yellow:not(.select-radio):active,
.button-b.yellow:not(.select-radio).is-active {
    --frame-top: hsl(var(--hue) calc(var(--saturation)*2) calc(var(--l_mult)*23.9%));
    --frame-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*53.7%));
    --face-top: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*44.3%));
    --face-bottom: hsl(var(--hue) calc(var(--saturation)) calc(var(--l_mult)*44.3%));
}


.button-b.button-b-icon img {
    vertical-align: sub;
}



.button-b.no-min-width {
    min-width: initial !important;
}


.button-b.small-x {
    line-height: 13px;
    font-size: 9px;
    font-weight: normal;
    text-align: center;
    padding: 0 5px;
    letter-spacing: initial;
}




.button-b.cyan {
    background-color: rgb(0, 100, 105);
    box-shadow: rgba(255, 255, 255, 0) 0px 5px 2px 0px inset, rgba(0, 0, 0, 0) 0px -15px 6px inset, rgba(143, 143, 143, 0) 0px -5px 6px inset, inset rgb(0 51 1) 0px 0px 0px 1px;
}


.button-b.orange {
    background-color: rgb(139, 83, 0);
    box-shadow: rgba(255, 255, 255, 0) 0px 5px 2px 0px inset, rgba(0, 0, 0, 0) 0px -15px 6px inset, rgba(143, 143, 143, 0) 0px -5px 6px inset, inset rgb(90, 53, 27) 0px 0px 0px 1px;
}







.button-b.cyan:hover,
.button-b.small.cyan:hover {
    background-color: rgb(41, 179, 174);
}



.button-b.cyan:active,
.button-b.small.cyan:active {
    background-color: #005552;
}

.button-b.blue:hover,
.button-b.small.blue:hover {
    background-color: #3683d8;
}


.button-b.orange:hover,
.button-b.small.orange:hover {
    background-color: rgb(166, 102, 6);
}

.button-b.orange:active,
.button-b.small.orange:active {
    background-color: rgb(99, 60, 0);
}





.select-radio-holder {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.select-radio-holder .select-radio {
    margin: 10px;
}

.button-b.select-radio {
    color: #ffffff;
    background-color: #7d8f9c;
    box-shadow: rgb(108, 128, 143) 0px 0px 0px 1px;
    line-height: 12px !important;
}


.button-b.select-radio:hover {
    background-color: #9fadb7;
    color: #ffffff !important;
}

.button-b.select-radio:active,
.button-b.select-radio.is-active {
    background-color: #556775;
    color: #ffffff !important;
}


.icon-settings-1 {
    background-image: url("https://utopie-game.ru/assets/icons/icon-settings-1-sheet.png");
    background-repeat: no-repeat;
    display: block;

    width: 22px;
    height: 22px;
    background-position: -5px -5px;
    cursor: pointer;
}

.icon-settings-1:hover {
    width: 22px;
    height: 22px;
    background-position: -37px -5px;
}

.icon-settings-1:active {
    width: 22px;
    height: 22px;
    background-position: -69px -5px;
}

.icon-x-1 {
    background-image: url("https://utopie-game.ru/assets/icons/icon-x-1-sheet.png?v=2");
    background-repeat: no-repeat;
    display: block;

    width: 22px;
    height: 22px;
    background-position: -5px -5px;
    cursor: pointer;
}

.icon-x-1:hover {
    background-position: -37px -5px;
}

.icon-x-1:active {
    background-position: -69px -5px;
}

.icon-list-1 {
    background-image: url("https://utopie-game.ru/assets/icons/icon-list-1.png?v=3");
    background-repeat: no-repeat;
    display: block;

    width: 22px;
    height: 22px;
    background-position: -5px -5px;
    cursor: pointer;
}

.icon-list-1:hover {
    background-position: -37px -5px;
}

.icon-list-1:active {
    background-position: -69px -5px;
}

.icon-inf-1 {
    background-image: url("https://utopie-game.ru/assets/icons/icon-inf-1-sheet.png?v=2");
    background-repeat: no-repeat;
    display: block;

    width: 22px;
    height: 22px;
    background-position: -5px -5px;
    cursor: pointer;
}

.icon-inf-1:hover {
    background-position: -37px -5px;
}

.icon-inf-1:active {
    background-position: -69px -5px;
}

.icon-window {
    background-image: url("https://utopie-game.ru/assets/icons/icon-window.png?v=2");
    background-repeat: no-repeat;
    display: block;

    width: 22px;
    height: 22px;
    background-position: -5px -5px;
    cursor: pointer;
}

.icon-window:hover {
    background-position: -37px -5px;
}

.icon-window:active {
    background-position: -69px -5px;
}

.icon-empty-1 {
    background-image: url(https://utopie-game.ru/assets/icons/icon-empty-1.png);
    background-repeat: no-repeat;
    display: block;
    width: 20px;
    height: 20px;
    background-position: -1px -1px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
    line-height: 20px;
    text-align: center;
    color: white;
    cursor: pointer;
}

.icon-empty-1:hover {
    width: 20px;
    height: 20px;
    background-position: -23px -1px;
}

.icon-empty-1:active {
    width: 20px;
    height: 20px;
    background-position: -45px -1px;
}






/*
button-sq
 */

.btn-sq,
.btn-sq:disabled,
.btn-sq.green,
.btn-sq.green:hover,
.btn-sq.green:active,
.btn-sq.green.is-active,
.btn-sq:hover,
.btn-sq.is-active,
.btn-sq:active {
    width: 52px;
    height: 42px;
}

.btn-sq {
    background-image: url(https://utopie-game.ru/assets/icons/btn-sq.png?v=1);
    background-repeat: no-repeat;
    display: block;

    width: 52px;
    height: 42px;
    background-position: -1px -1px;

    cursor: pointer;


    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    user-select: none;

    line-height: 42px;
    overflow: hidden;
    color: #f4faff;
    font-size: 12px;
    font-weight: normal;
    font-family: inherit;
    text-align: center;
    text-shadow: 1px 1px #333;
    text-decoration: none;
    white-space: nowrap;
    outline: none;
}


.btn-sq:disabled {
    width: 52px;
    height: 42px;
    background-position: -55px -1px;
}

.btn-sq.green {
    width: 52px;
    height: 42px;
    background-position: -1px -45px;
}

.btn-sq.green:hover {
    width: 52px;
    height: 42px;
    background-position: -55px -45px;
}

.btn-sq.green:active,
.btn-sq.green.is-active {
    width: 52px;
    height: 42px;
    background-position: -109px -1px;
}

.btn-sq:hover {
    width: 52px;
    height: 42px;
    background-position: -109px -45px;
}

.btn-sq.is-active,
.btn-sq:active {
    width: 52px;
    height: 42px;
    background-position: -1px -89px;
}

.ui-dialog-buttonset button.button-b {
    padding: initial !important;
    background-image: url(https://utopie-game.ru/assets/i/button/button-lighter.png);
    text-shadow: initial !important;
}

.ui-dialog-buttonset button.button-b:hover {
    background-image: url(https://utopie-game.ru/assets/i/button/button-lighter.png);
}

.ui-dialog-buttonset button.button-b.small {
    padding: 6px 15px !important;
    text-shadow: 0 1px 0 #333, 0 1px 3px #333 !important;
}

.ui-dialog-buttonset button.button-b.small:hover {
    padding: 6px 15px !important;
    text-shadow: 0 1px 0 #333, 0 1px 3px #333 !important;
}


.button-b.snowy {
    position: relative;
    overflow: hidden;
}

.button-b.snowy span {
    font-weight: 200;
}

.button-b.snowy::before,
.button-b.snowy::after {
    content: '❆';
    text-shadow: initial !important;
    position: absolute;
    color: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.button-b.snowy::before {
    font-size: 83px;
    top: 13px;
    left: -8px;
    transform: rotate(15deg);
}

.button-b.snowy::after {
    font-size: 54px;
    bottom: -5px;
    right: 67px;
    transform: rotate(-10deg);
}


.button-b.snowy span::before,
.button-b.snowy span::after {
    content: '❅';
    text-shadow: initial !important;
    position: absolute;
    color: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.button-b.snowy span::before {
    font-size: 96px;
    top: -6px;
    right: -16px;
}

.button-b.snowy span::after {
    font-size: 36px;
    bottom: 12px;
    left: 42px;
    transform: rotate(-20deg);
}


/*
buttonQuadBlue54
 */
.buttonQuadBlue54 {
    background: url('/assets/i/button/buttonQuadBlue.png') no-repeat top left;
    width: 54px;
    height: 54px;
    /* background-size: 54px 54px; */
    background-position: -55px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttonQuadBlue54:hover {
    background-position: 0 0;
}

.buttonQuadBlue54:active,
.buttonQuadBlue54.is-active {
    background-position: -110px 0;
}

.buttonQuadRune54 {
    background: url('https://utopie-game.ru/assets/i/gui/common-rune-button-bg.png') no-repeat top left;
    width: 54px;
    height: 54px;
    /* background-size: 54px 54px; */
    background-position: -55px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttonQuadRune54:hover {
    background-position: 0 0;
}

.buttonQuadRune54:active,
.buttonQuadRune54.is-active {
    background-position: -110px 0;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .buttonQuadBlue54 {
        background: url('/assets/i/button/buttonQuadBlue@2x.png') no-repeat top left;
        background-size: 165px 54px;
        background-position: -55px 0;
    }
}

/*
Arrows in buttonQuadBlue54
 */
.ArrowButton {
    background: url('/assets/i/button/ButtonArrows.png') no-repeat top left;
}

.ArrowButton.ArrowDown {
    background-position: 0 0;
    width: 31px;
    height: 30px;
}

.ArrowButton.ArrowLeft {
    background-position: -32px 0;
    width: 30px;
    height: 31px;
}

.ArrowButton.ArrowRight {
    background-position: -63px 0;
    width: 30px;
    height: 31px;
}

.ArrowButton.ArrowUp {
    background-position: -94px 0;
    width: 31px;
    height: 30px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .ArrowButton {
        background: url('/assets/i/button/ButtonArrows@2x.png') no-repeat top left;
        background-size: 126px 31px;
    }
}

/*
Small icons buttons
*/
.iconMax {
    color: white;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: url('https://utopie-game.ru/assets/i/icons/arrow-up-white.png?v=1') no-repeat center center;
    background-size: 50%;
}

.iconInv {
    color: white;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: url('https://utopie-game.ru/assets/i/chest/chest_rand_silver.png') no-repeat center center;
    background-size: 80%;
}

.ButtonIcon32,
.ButtonIcon32 .icon {
    background: url('/assets/i/button/ButtonsSpritesheet.png') no-repeat top left;
    width: 32px;
    height: 32px;
}

.ButtonIcon32.GreenButton {
    background: url('/assets/i/button/ButtonsGreenYellowSpritesheet.png?v=1') no-repeat top left;
}

.ButtonIcon32.GreyButton {
    background: url('/assets/i/button/ButtonsSpritesheetGrey.png?v=1') no-repeat top left;
}

.ButtonIcon32 .icon {
    display: block;
}

.ButtonIcon32.BlueButton:hover,
.ButtonIcon32.GreenButton:hover {
    background-position: 0 0;
}

.ButtonIcon32.BlueButton,
.ButtonIcon32.GreenButton {
    background-position: -33px 0;
}

.ButtonIcon32.BlueButton:active,
.ButtonIcon32.GreenButton:active,
.ButtonIcon32.BlueButton.is-active,
.ButtonIcon32.GreenButton.is-active {
    background-position: 0 -33px;
}

.ButtonIcon32.RedButton:hover {
    background-position: -33px -33px;
}

.ButtonIcon32.RedButton {
    background-position: -66px 0;
}

.ButtonIcon32.RedButton:active,
.ButtonIcon32.RedButton.is-active {
    background-position: -66px -33px;
}

.ButtonIcon32 .icon.iconExit {
    background-position: 0 -66px;
}

.ButtonIcon32 .icon.iconMap {
    background-position: -33px -66px;
}

.ButtonIcon32 .icon.iconSettings {
    background-position: -66px -66px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .ButtonIcon32,
    .ButtonIcon32 .icon {
        background: url('/assets/i/button/ButtonsSpritesheet@2x.png') no-repeat top left;
        background-size: 99px 99px;
    }
}










.button-b.select-radio {
    position: relative;
    display: inline-block;
    line-height: 20px;
    padding: 5px 30px;
    border-radius: 3px;
    overflow: hidden;
    font-size: 11px;
    font-family: inherit;
    text-align: center;
    text-shadow: 0 1px 0 #333, 0 1px 3px #333;
    text-decoration: none;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.07s;
    box-shadow: inset 0px 5px 2px 0px rgb(255 255 255 / 0%), inset 0px -15px 6px rgb(0 0 0 / 0%), inset 0px -5px 6px rgb(255 255 255 / 0%), inset 0px 0px 0px 1px rgb(113, 129, 141);
    color: #ffffff !important;
    background-color: #7d8f9c;

    border: none !important;


    background-image: url("/assets/i/button/button-lighter.png");
    background-size: cover;
    background-blend-mode: overlay;


    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button-b.small.select-radio {
    box-shadow: rgb(108, 128, 143) 0px 0px 0px 1px;
    line-height: 11px;
    font-size: 11px;
    font-weight: normal;
    padding: 6px 15px;
}

.button-b.select-radio {
    color: #ffffff;
    background-color: #7d8f9c;
    box-shadow: rgb(108, 128, 143) 0px 0px 0px 1px;
}


.button-b.select-radio:hover {
    background-color: #9fadb7;
    color: #ffffff !important;
}


.button-b.select-radio:active,
.button-b.select-radio.is-active {
    background-color: #556775;
    color: #ffffff !important;
}



.button-b.button-b-small-icon {
    --h: 64;
    --s: 0.3;
    padding: 0;
    line-height: 19px !important;
    min-width: 20px !important;
}