.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 {
    position: relative;
    display: inline-block;
    line-height: 20px;
    padding: 5px 30px;
    border-radius: 3px;
    overflow: hidden;
    margin: 0;
    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.button-b-icon img {
    vertical-align: sub;
}

.button-b.disabled {
    background-color: #919191 !important;
    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(121 121 121) 0px 0px 0px 1px !important;
    cursor: default;
}

.button-b:not(.small) {
    min-width: 165px;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    padding: 0 10px;
    /* letter-spacing: 1px; */
}

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

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

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

.button-b.yellow {
    background-color: #baa624;
    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(51, 29, 0) 0px 0px 0px 1px;
}

.button-b.green {
    background-color: rgb(49, 105, 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(0 51 1) 0px 0px 0px 1px;
}

.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.blue {
    background-color: #2375cf;
    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, 22, 51) 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.small.green {
    color: #efffef;
    background-color: rgb(57, 151, 0);
    box-shadow: inset 0px 5px 2px 0px rgb(255 255 255 / 21%), inset 0px -15px 6px rgb(0 0 0 / 17%), inset 0px -5px 6px rgb(255 255 255 / 28%), 0px 0px 0px 1px rgb(8 87 10);
}

.button-b.small.blue {
    background-color: #2375cf;
    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, 22, 51) 0px 0px 0px 1px;
}

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

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

.button-b.green:active,
.button-b.small.green:active {
    background-color: #205500;
}

.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.blue:active,
.button-b.small.blue:active {
    background-color: #0e549e;
}

.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);
}

.button-b.yellow:hover,
.button-b.small.yellow:hover {
    background-color: rgb(209, 194, 0);
}

.button-b.yellow:active,
.button-b.small.yellow:active {
    background-color: rgb(115, 100, 11);
}

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

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

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

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

.button-b:active,
.button-b.is-active,
.button-b.select-radio:active,
.button-b.select-radio.is-active,
.button-b.small:active,
.button-b.small.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-b.red {
    background-color: rgb(151, 0, 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(51 0 0) 0px 0px 0px 1px;
}

.button-b.small.red {
    color: #efffef;
    background-color: rgb(151, 0, 0);
    box-shadow: inset 0px 5px 2px 0px rgb(255 255 255 / 21%), inset 0px -15px 6px rgb(0 0 0 / 17%), inset 0px -5px 6px rgb(255 255 255 / 28%), 0px 0px 0px 1px rgb(121 0 0);
}

.button-b.red:hover,
.button-b.small.red:hover {
    background-color: rgb(203, 0, 0);
}

.button-b.red:active,
.button-b.small.red:active {
    background-color: rgb(107, 0, 0);
}


/*
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;
}

@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
 */
.buttonQuadBlue54 .ArrowButton {
    background: url('/assets/i/button/ButtonArrows.png') no-repeat top left;
}

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

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

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

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

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

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

.ButtonIcon32 .icon {
    display: block;
}

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

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

.ButtonIcon32.BlueButton:active,
.ButtonIcon32.BlueButton.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;
    }
}