body{
    background:#11131b;
    color:white;
}

#page{
    padding: 20px;
    height: 100vh;
    overflow: auto;
    transition: 3s;
    opacity: 1;
    position: relative;
    top:0;
}

#page.load-process{
    opacity:0.5;
    top:50px;
}

.wui-tile{
    background: #1a1d28;
    background: #1a1d281e;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.wui-page-label{
    color: white;
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
}
.wui-page-comment{
    color: #7583a1;
    line-height: 18px;
    font-weight: 500;
    margin: 0 0 30px 0;
    font-size: 14px;
}
.wui-page-back{
    color: #7583a1;
    line-height: 18px;
    font-weight: 500;
    margin: 0 0 30px 0;
    font-size: 14px;
    text-decoration:none;
    display:block;
}
.wui-wzero-span{
    font-size: 10px;
    font-weight: 700;
}
.wui-empty-state{}
.wui-empty-state .icon{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 10px 0;
}
.wui-empty-state .text{
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:500;
    text-align:center;
    color:#7583a1;
}
.wui-info-block {
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: flex-start;
}
.wui-info-block .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 0 0;
}
.wui-info-block .content {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #7583a1;
}

#app .root-shadow{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
    z-index: 99;
}
#app .root-shadow.active{
    opacity: 1;
    visibility: visible;
}

#app .menu-burger{
    position: fixed;
    top: 13px;
    right: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
}
#app .menu-burger .lines{
    width: 30px;
    height: 20px;
    position: relative;
}
#app .menu-burger .lines .line{
    width: 100%;
    height: 4px;
    background: #6dbe45;
    border-radius: 5px;
    position: absolute;
    transition: 0.3s;
}
#app .menu-burger .lines .line.line-1{
    top: 0px;
}
#app .menu-burger .lines .line.line-2{
    top: 8px;
}
#app .menu-burger .lines .line.line-3{
    top: 16px;
}
#app .menu-burger.active .lines .line.line-1 {
    top: 8px;
    transform: rotate(250grad);
}
#app .menu-burger.active .lines .line.line-2 {
    display: none;
}
#app .menu-burger.active .lines .line.line-3 {
    top: 8px;
    transform: rotate(-250grad);
}

#app .main-menu{
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 50%;
    padding: 70px 5px 0 5px;
    transition: 0.3s;
    opacity: 0;
}
#app .main-menu.active{
    left: 50%;
    opacity: 1;
}
#app .main-menu .button{
    display: flex;
    align-items: center;
    margin: 0 0 10px 0;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 14px;
    color:white;
}
#app .main-menu .button .icon{
    width: 24px;
    height: 24px;
    margin: 0 5px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#app .main-menu .delimeter{
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 10px 0;
}
#app .main-menu .delimeter .line{
    width: 80%;
    height: 1px;
    background: #1a1d28;
    border-radius: 10px;
}

#vui-modal-window-area{
    background: rgba(0, 0, 0, 0.5)!important;
    backdrop-filter: blur(10px)!important;
    -webkit-backdrop-filter: blur(5px)!important;
    z-index:99999999!important;
}
#vui-overlay-notifications-area {
    position: fixed  !important;
    top: 20px  !important;
    left: 10px  !important;
    width: calc(55vw - 10px)  !important;
    z-index: 9999999999999999999999999999999999  !important;
}
#vui-overlay-notifications-area .vui-overlay-notification{
    position: relative !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 16px 50px 16px 16px !important;
    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2) !important;
    margin: 0 0 20px 0 !important;
    width: 100% !important;
    transition: 0.3s !important;
    left: -500px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
#vui-overlay-notifications-area .vui-overlay-notification--shown {
    left: 0 !important;
}
#vui-overlay-notifications-area .vui-overlay-notification.error{
    border-left: 4px solid red;
}
#vui-overlay-notifications-area .vui-overlay-notification.success{
    border-left: 4px solid #6dbe45;
}
#vui-overlay-notifications-area .vui-overlay-notification.error{}
#vui-overlay-notifications-area .vui-overlay-notification .icon{
    display:none !important;
}
#vui-overlay-notifications-area .vui-overlay-notification .text {
}
#vui-overlay-notifications-area .vui-overlay-notification .text .title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: white !important;
}
#vui-overlay-notifications-area .vui-overlay-notification .text .comment {
    font-size: 10px !important;
    color: white !important;
    margin: 4px 0 0 0 !important;
    line-height:15px !important;
}

.prepare-page{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:visible;
    top:20px;
    transition:0.3s;
    z-index:2;
}
.prepare-page.active{
    opacity:1;
    visibility:visible;
    top:0;
}
.prepare-page .background{
    position:fixed;
    top:-100px;
    right:-100px;
    bottom:-100px;
    left:-100px;
    background-image: url('/uploads/691a37a514a37.jpg');
    background-repeat: repeat;          /* бесконечная плитка */
    background-size: 800px 800px;     /* подбираешь под размер своей картинки */
    
    transform: rotate(-15deg);          /* наклон */
    transform-origin: center;

    animation: slide-diagonal 60s linear infinite;
    filter: brightness(0.85); 
}
@keyframes slide-diagonal {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1800px -1800px;
    }
}
.prepare-page .banner{
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(20, 20, 20, 0.7);
        width: 90%;
        padding: 30px;
        border-radius: 20px;
}
.prepare-page .banner .title{
    color:white;
    text-align:center;
    font-size:22px;
    font-weight:600;
}
.prepare-page .banner .content{
    color:white;
    margin:20px 0;
    line-height:22px;
    font-weight:500;
    font-size: 14px;
}
.prepare-page .banner .button{
    width:100%;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#6DBE45;
    color:white;
    font-weight:500;
    border-radius:10px;
    margin:0 auto;
    border:none;
}

.prepare-guard-page{
    padding:20px;
}
.prepare-guard-page .messages{}
.prepare-guard-page .messages .message{
    margin: 0 0 20px 0;
    background: #1a1d28;
    padding: 10px;
    border-radius: 10px;
    width: 80%;
    display: flex;
    align-items: flex-start;
    position: relative;
    transition: 0.3s;
    top: 20px;
    opacity: 0;
}
.prepare-guard-page .messages .message.active{
    top: 0;
    opacity: 1;
}
.prepare-guard-page .messages .message .icon{
    width: 50px;
    min-width: 50px;
    height: 50px;
    margin: 0 10px 0 0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prepare-guard-page .messages .message .icon img{
    width: 100%;
}
.prepare-guard-page .messages .message .text{}
.prepare-guard-page .messages .message .name{
    margin: 0 0 5px 0;
    font-size: 12px;
    font-weight: 600;
}
.prepare-guard-page .messages .message .content{
    font-size: 12px;
    line-height: 14px;
}
.prepare-guard-page .messages .button{
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    background: #6dbe45;
    margin: 0 0 10px 0;
    text-decoration:none;
    color:white;
    display:block;
    font-weight:600;
    font-size:12px;
    text-align:center;
    position: relative;
    transition: 0.3s;
    top: 20px;
    opacity: 0;
}
.prepare-guard-page .messages .button.active{
    top: 0;
    opacity: 1;
}

.guard-set-name-modal{
    background: rgba(20, 20, 20, 0.7);
    width: 100%;
    padding: 30px;
    border-radius: 20px;
}
.guard-set-name-modal .label{
    font-size:20px;
    font-weight:600;
}
.guard-set-name-modal input{
        margin: 20px 0;
        display: block;
        height: 35px;
        text-align: center;
        width: 100%;
        background: #1a1d28;
        border: none;
        color: white;
        font-size: 18px;
}
.guard-set-name-modal .button{
    width:100%;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#6DBE45;
    color:white;
    font-weight:500;
    border-radius:10px;
    margin:0 auto;
    border: none;
    font-size:14px;
}

.shop-page{}
.shop-page .balance-line{
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
}
.shop-page .balance-line .title{
    font-size: 12px;
    font-weight: 600;
    margin: 0 5px 0 0;
}
.shop-page .balance-line .value{
    font-size: 14px;
    font-weight: 500;
}
.shop-page .section{
    margin: 0 0 30px 0;
}
.shop-page .section .title{
    margin: 0 0 20px 0;
    color: #7583a1;
    font-size: 20px;
    font-weight: 500;
}
.shop-page .section .items{}
.shop-page .section .items .item{
    padding: 10px 20px;
    border-radius: 10px;
    margin: 0 0 20px 0;
}
.shop-page .section .items .item .i-title{
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 5px 0;
}
.shop-page .section .items .item .item-line{
    display: flex;
    align-items: Center;
}
.shop-page .section .items .item .item-line .icon{
    width: 60px;
    overflow: hidden;
    padding: 5px;
    margin: 0 10px 0 0;
}
.shop-page .section .items .item .item-line .icon img{
    width: 100%;
}
.shop-page .section .items .item .item-line .price{}
.shop-page .section .items .item .item-line .buy-button{
    margin: 0 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    background: #6dbe45;
    cursor: pointer;
    border-radius: 5px;
    width: 72.5px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:none;
    color:white;
}
.shop-page .section .items .item .stats{}
.shop-page .section .items .item .stats .line{
    display: flex;
    align-items: center;
}
.shop-page .section .items .item .stats .line .name{
    font-size: 12px;
    margin: 0 10px 0 0;
}
.shop-page .section .items .item .stats .line .value{
    font-size: 14px;
    font-weight: 600;
}

.storage-page{}
.storage-page .section-title{
    color: #7583a1;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px 0;
}
.storage-page .items-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
}
.storage-page .items-grid .item{
    border-radius: 10px;
    padding: 20px 10px;
}
.storage-page .items-grid .item .icon{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 0 0 10px 0;
}
.storage-page .items-grid .item .icon img{
    max-width: 100%;
    max-height: 100%;
}
.storage-page .items-grid .item .title{
    text-align: center;
    font-sizE: 12px;
    font-weight: 600;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.storage-page .stocks{
    margin: 0 0 30px 0;
}
.storage-page .stocks .item{
    padding: 10px 20px;
    border-radius: 10px;
    margin: 0 0 20px 0;
}
.storage-page .stocks .item .info-line{
    display: flex;
    align-items: center;
    margin: 0 0 5px 0;
}
.storage-page .stocks .item .info-line .icon{
    width: 50px;
    min-width: 50px;
    margin: 0 15px 0 0;
}
.storage-page .stocks .item .info-line .icon img{
    width: 100%;
}
.storage-page .stocks .item .info-line .content{
    width: 100%;
}
.storage-page .stocks .item .info-line .content .title{
    font-weight: 600;
    margin: 0 0 5px 0;
}
.storage-page .stocks .item .info-line .content .count-line{
    display: flex;
    align-items: center;
    width: 100%;
}
.storage-page .stocks .item .info-line .content .count-line .count{
    width: calc(100% - 70px);
    background: black;
    overflow: hidden;
    height: 10px;
    border-radius: 10px;
}
.storage-page .stocks .item .info-line .content .count-line .count .value{
    height: 100%;
    background: #6dbe45;
}
.storage-page .stocks .item .info-line .content .count-line .num-value{
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.storage-page .stocks .item .info-line .content .count-line .num-value .num{
    font-size: 12px;
    font-weight: 600;
}
.storage-page .stocks .item .info-line .content .count-line .num-value .delimeter{
    font-size: 12px;
    margin: 0 5px;
}
.storage-page .stocks .item .add-line{
    display: flex;
    align-items: center;
}
.storage-page .stocks .item .add-line .button{
    width: 90px;
    height: 23px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    margin: 0 10px 0 0;
    background: #6dbe45;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color:white;
    border:none;
}
.storage-page .stocks .item .add-line .price{
    font-size: 12px;
    display: flex;
    align-items: center;
    font-weight: 500;
}
.storage-page .stocks .item .add-line .price .icon{
    width: 16px;
    height: 22px;
    margin: 0 0 0 5px;
}

.home-page{
    padding: 0 0 250px 0;
}
.home-page .slots-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
}
.home-page .slots-grid .slot{
    height: 160px;
    position: relative;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-page .slots-grid .slot .add{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    font-size: 60px;
    color: #6dbe45;
    cursor: pointer;
}

.home-page .slots-grid .slot .slot-content{}
.home-page .slots-grid .slot .slot-content .plant-icon{
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.home-page .slots-grid .slot .slot-content .plant-icon img{
    height: 100%;
}
.home-page .slots-grid .slot.fresh .slot-content .plant-icon img{
    transform-origin: center bottom;
    animation: bend 5.5s ease-in-out infinite;
}
@keyframes bend {
  0% {
    transform: rotate(0deg) skewX(0deg) scale(1);
  }
  20% {
    transform: rotate(3deg) skewX(1deg) scale(1.02);
  }
  40% {
    transform: rotate(-2deg) skewX(-1.5deg) scale(1.05);
  }
  60% {
    transform: rotate(4deg) skewX(1deg) scale(1.03);
  }
  80% {
    transform: rotate(-1.5deg) skewX(-0.5deg) scale(1.01);
  }
  100% {
    transform: rotate(0deg) skewX(0deg) scale(1);
  }
}
.home-page .slots-grid .slot.wilted .slot-content .plant-icon img{
    filter: grayscale(60%) brightness(0.7) contrast(0.8) sepia(40%) hue-rotate(-20deg) saturate(60%) blur(0.5px);
}
.home-page .slots-grid .slot .slot-content .pot-icon{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -6px;
}
.home-page .slots-grid .slot .slot-content .pot-icon img{
    height: 100%;
}
.home-page .slots-grid .slot.blooming .slot-content .pot-icon img{
    filter: brightness(1.3) contrast(1.2) saturate(1.8) hue-rotate(10deg) drop-shadow(0 0 10px rgba(255,255,200,0.6));
}
.home-page .slots-grid .slot .icons{
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 10px;
}
.home-page .slots-grid .slot .icons .icon{
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin: 0 0 5px 0;
}
.home-page .slots-grid .slot .icons .icon.green{
    color:#6dbe45;
}
.home-page .slots-grid .slot .icons .icon.yellow{
    color:yellow;
}
.home-page .slots-grid .slot .icons .icon.red{
    color:red;
}
.home-page .guard-preview{
    z-index: 9;
    position: fixed;
    left: -12px;
    bottom: -31px;
    cursor: pointer;
}
.home-page .guard-preview .image{
    width: 200px;
}
.home-page .guard-preview .image img{
    width: 100%;
    position:relative;
    //animation: guardIdle 4s ease-in-out infinite;
    transform-origin: center bottom;
    filter: brightness(1.1) contrast(1.2);
}
@keyframes guardIdle {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-2px) rotate(0.3deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
.home-page .guard-preview .replic{
    position: absolute;
    padding: 10px;
    background: #11131b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    z-index: 2;
    top: 126px;
    left: 102px;
    width: 40vw;
    border-radius: 5px;
}
.home-page .guard-preview .replic .triangle{
    border: 6px solid transparent;
    border-bottom: 23px solid #11131b;
    transform: rotate(-40grad);
    position: absolute;
    top: -23px;
    left: 8px;
}
.home-page .guard-preview .replic .content{
    color: white;
    font-sizE: 10px;
    line-height: 14px;
}

.bot-over-modal{
    position: fixed;
    top: 100vh;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 20px 20px 0 0;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    padding: 30px 30px 80px 30px;
    overflow: auto;
}
.shown .bot-over-modal{
    opacity: 1;
    visibility: visible;
    top: 30vh;
    
}
.bot-over-modal .set-land-slot-modal{}
.bot-over-modal .set-land-slot-modal .label{
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 10px 0;
}
.bot-over-modal .set-land-slot-modal .section{}
.bot-over-modal .set-land-slot-modal .section .s-label{
    margin: 0 0 20px 0;
    color: #7583a1;
    font-size: 20px;
    font-weight: 500;
}
.bot-over-modal .set-land-slot-modal .section .items-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin:0 0 20px 0;
}
.bot-over-modal .set-land-slot-modal .section .items-grid .item{
    background: #1a1d28;
    border-radius: 10px;
    padding: 20px 10px;
}
.bot-over-modal .set-land-slot-modal .section .items-grid .item.active{
        outline: 2px solid #6dbe45;
}
.bot-over-modal .set-land-slot-modal .section .items-grid .item .icon{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 0 0 10px 0;
}
.bot-over-modal .set-land-slot-modal .section .items-grid .item .icon img{
    max-width: 100%;
    max-height: 100%;
}
.bot-over-modal .set-land-slot-modal .section .items-grid .item .title{
    text-align: center;
    font-sizE: 12px;
    font-weight: 600;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bot-over-modal .set-land-slot-modal .button{
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    background: #6dbe45;
    border:none;
    color:white;
}

.bot-over-modal .land-slot-modal{}
.bot-over-modal .land-slot-modal .buf-lines{
    margin:0 0 20px 0;
}
.bot-over-modal .land-slot-modal .buf-lines .line{
    display: flex;
    align-items: center;
    justify-content:center;
    border-radius: 10px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.1);
}
.bot-over-modal .land-slot-modal .buf-lines .line .value{
    font-size: 14px;
    font-weight: 600;
    margin: 0 10px 0 0;
}
.bot-over-modal .land-slot-modal .buf-lines .line.green .value{
    color:#6dbe45;
}
.bot-over-modal .land-slot-modal .buf-lines .line.gold .value{
    color:#F0C844;
}
.bot-over-modal .land-slot-modal .buf-lines .line .comment{
    font-size: 12px;
}
.bot-over-modal .land-slot-modal .stats-line{
    margin: 0 0 30px 0;
}
.bot-over-modal .land-slot-modal .stats-line .line{
    display: flex;
    align-items: center;
    margin: 0 0 10px 0;
}
.bot-over-modal .land-slot-modal .stats-line .line .name{
    width: 50%;
    text-align:right;
    padding:0 10px 0 0;
    font-size:14px;
}
.bot-over-modal .land-slot-modal .stats-line .line .value{
    width: 50%;
    font-weight: 600;
    padding:0 0 0 10px;
    font-size:14px;
}
.bot-over-modal .land-slot-modal .stats-line .line .value.green{
    color:#6dbe45;
}
.bot-over-modal .land-slot-modal .stats-line .line .value.yellow{
    color:yellow;
}
.bot-over-modal .land-slot-modal .stats-line .line .value.red{
    color:red;
}
.bot-over-modal .land-slot-modal .action-buttons{}
.bot-over-modal .land-slot-modal .action-buttons .button{
        margin: 0 0 15px 0;
        height: 30px;
        width:100%;
        border:none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        color:white;
}
.bot-over-modal .land-slot-modal .action-buttons .button.water{
    background:#6dbe45;
}
.bot-over-modal .land-slot-modal .action-buttons .button.delete{
    background:red;
}
.bot-over-modal .land-slot-modal .action-buttons .button.fertilisers{
    background:#a66d30;
}

.accept-modal {
    width: calc(100% - 40px);
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 10px;
    margin:0 auto;
}
.accept-modal .title {
    color: white;
    font-sizE: 20px;
    font-weight: 600;
    margin: 0 0 20px 0;
}
.accept-modal .title-comment {
    line-height: 18px;
    font-sizE: 14px;
    color: white;
    margin: 0 0 20px 0;
}
.accept-modal .buttons {
    display: flex;
    align-items: center;
}
.accept-modal .buttons .button {
    width: calc(50% - 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
    border:none;
}
.accept-modal .buttons .button.accept {
    margin: 0 20px 0 0;
    background: red;
}
.accept-modal .buttons .button.cancel {
    background: #1a1d28;
}

.profile-page{}
.profile-page .user-line{
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    margin: 0 0 20px 0;
}
.profile-page .user-line .photo{
    height: 80px;
    width: 80px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px 0 0;
    border-radius: 10px;
}
.profile-page .user-line .photo img{
    width: 100%;
}
.profile-page .user-line .text{}
.profile-page .user-line .text .status{
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 600;
}
.profile-page .user-line .text .status.wzero_keeper{
    color:#df2e04;
}
.profile-page .user-line .text .status.influencer{
    color:#F0C844;
}
.profile-page .user-line .text .name{
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px 0;
}
.profile-page .user-line .text .user{
    font-weight: 500;
}
.profile-page .farmer {
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin: 0 0 20px 0;
}
.profile-page .farmer .icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 0 0;
    overflow:hidden;
}
.profile-page .farmer .text {
    width: 100%;
}
.profile-page .farmer .text .level {
    font-size: 14px;
}
.profile-page .farmer .text .level b {
    font-weight: 600;
    font-size: 14px;
}
.profile-page .farmer .text .xp {
    margin: 5px 0 0 0;
    font-size: 12px;
    display: flex;
    align-items: Center;
    width: 100%;
}
.profile-page .farmer .text .xp .delimeter {
    margin: 0 5px;
}
.profile-page .farmer .text .add {
    display: flex;
    align-items: center;
    margin: 5px 0 0 0;
}
.profile-page .farmer .text .add .button {
    width: 90px;
    height: 23px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    margin: 0 10px 0 0;
    background: #6dbe45;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color:white;
    border:none;
}
.profile-page .farmer .text .add .comment {
    font-size: 12px;
    font-weight: 500;
    margin: 0 5px 0 0;
}
.profile-page .farmer .text .add .icon {
    width: 16px;
    height: 22px;
}
.profile-page .status-influencer-time {
    margin: 0 0 20px 0;
    padding: 0 20px;
}
.profile-page .status-influencer-time .title {
    color: #7583a1;
    font-size: 12px;
    margin: 0 0 10px 0;
}
.profile-page .status-influencer-time .title .time {
    color: white;
    font-size: 12px;
    font-weight: 500;
}
.profile-page .status-influencer-time .more {
    display: flex;
    align-items: center;
}
.profile-page .status-influencer-time .more .button {
    width: 90px;
    height: 23px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    margin: 0 10px 0 0;
    background: #6dbe45;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color:white;
    border:none;
}
.profile-page .status-influencer-time .more .text {
    font-size: 12px;
    font-weight: 500;
    margin: 0 5px 0 0;
}
.profile-page .status-influencer-time .more .icon {
    width: 16px;
    height: 22px;
}
.profile-page .user-stat-line{
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    margin:0 0 20px 0;
}
.profile-page .user-stat-line .k-title{
    font-size: 12px;
    font-weight: 600;
    margin: 0 5px 0 0;
}
.profile-page .user-stat-line .k-value{
    font-size: 14px;
    font-weight: 500;
}
.profile-page .referrals {
}
.profile-page .referrals .title {
    color: #7583a1;
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 20px 0;
}
.profile-page .referrals .items {
}
.profile-page .referrals .items .invite {
    margin: 0 0 20px 0;
    cursor: pointer;
    padding: 0 5px;
    font-weight: 600;
}
.profile-page .referrals .items .item {
    margin: 0 0 10px 0;
    border-radius: 10px;
    padding: 5px;
    display: flex;
    align-items: center;
}
.profile-page .referrals .items .item .photo {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 0 0;
    overflow: hidden;
    border-radius: 5px;
}
.profile-page .referrals .items .item .photo img {
    width: 100%;
}
.profile-page .referrals .items .item .username {
    font-weight: 600;
    font-size:14px;
}

.quests-page{}
.quests-page .section {
}
.quests-page .section .title {
    font-weight: 500;
    margin: 0 0 20px 0;
    font-size: 20px;
}
.quests-page .section .line {
    padding: 15px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin: 0 0 10px 0;
}
.quests-page .section .line .icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quests-page .section .line .info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.quests-page .section .line .info .name {
    font-size: 14px;
}
.quests-page .section .line .info .value {
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    font-size: 14px;
}
.quests-page .section .line .info .value .delimeter {
    margin: 0 5px;
}
.quests-page .section .line .info .value .icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.quests-page .section .line .info .xp {
    width: 100%;
    font-size: 12px;
    font-weight: 500;
}

.guard-page .stats {
    border-radius: 10px;
    padding: 15px 20px;
}
.guard-page .stats .stat {
    margin: 0 0 40px 0;
}
.guard-page .stats .stat .name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: white;
}
.guard-page .stats .stat .line {
    width: 100%;
    margin: 0 auto 10px auto;
    height: 30px;
    border-radius: 30px;
    position: relative;
    background: linear-gradient(to right, red 17%, orange 34%, yellow 51%, lightgreen 68%, green 85%, darkgreen 100%);
}
.guard-page .stats .stat .line .black {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
}
.guard-page .stats .stat .line .point {
    position: absolute;
    width: 2px;
    background: black;
    z-index: 2;
    height: 20px;
    top: 5px;
    border-radius: 10px;
}
.guard-page .stats .stat .line .point.point-1 {
    left: calc(17% - 1px);
}
.guard-page .stats .stat .line .point.point-2 {
    left: calc(34% - 1px);
}
.guard-page .stats .stat .line .point.point-3 {
    left: calc(50% - 1px);
}
.guard-page .stats .stat .line .point.point-4 {
    left: calc(68% - 1px);
}
.guard-page .stats .stat .line .point.point-5 {
    left: calc(85% - 1px);
}
.guard-page .stats .stat .line .cursor {
    position: absolute;
    top: 18px;
    border: 8px solid transparent;
    border-bottom: 15px solid white;
}
.guard-page .stats .stat .line .cursor span {
    display: block;
    position: absolute;
    width: 200px;
    color: white;
    top: 15px;
    left: calc(50% - 100px);
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.incidents-page .incidents {
}
.incidents-page .incidents .item {
    padding: 15px 20px;
    margin: 0 0 20px 0;
    border-radius: 10px;
}
.incidents-page .incidents .item .title {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 5px 0;
    display: flex;
    align-items: Center;
}
.incidents-page .incidents .item .title .date-time {
    margin: 0 0 0 10px;
    font-size: 12px;
    color: #7583a1;
}
.incidents-page .incidents .item .content {
    font-size: 12px;
    line-height: 16px;
}

.guard-dialog-page{}
.guard-dialog-page .dialog{}
.guard-dialog-page .dialog .message {
    margin: 0 0 20px 0;
    padding: 10px;
    border-radius: 10px;
    width: 80%;
    display: flex;
    align-items: flex-start;
    position: relative;
    transition: 1s;
    top: 20px;
    opacity: 0;
    visibility:hidden;
}
.guard-dialog-page .dialog .message.shown {
    top: 0;
    opacity: 1;
    visibility:visible;
}
.guard-dialog-page .dialog .message.user{
    margin-left:auto;
}
.guard-dialog-page .dialog .message .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    margin: 0 10px 0 0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.guard-dialog-page .dialog .message .icon img {
    width: 100%;
}
.guard-dialog-page .dialog .message .text{}
.guard-dialog-page .dialog .message .text .name {
    color: white;
    margin: 0 0 5px 0;
    font-size: 12px;
    font-weight: 600;
}
.guard-dialog-page .dialog .message .text .content {
    font-size: 12px;
    line-height: 16px;
}
.guard-dialog-page .dialog .comment {
    margin: 0 0 20px 0;
    padding: 10px;
    border-radius: 10px;
    width: 80%;
    display: flex;
    align-items: flex-start;
    position: relative;
    transition: 1s;
    top: 20px;
    opacity: 0;
    visibility:hidden;
}
.guard-dialog-page .dialog .comment.shown {
    top: 0;
    opacity: 1;
    visibility:visible;
}
.guard-dialog-page .dialog .comment.user{
    margin-left:auto;
}
.guard-dialog-page .dialog .comment .text{}
.guard-dialog-page .dialog .comment .text .content {
    font-size: 12px;
    line-height: 14px;
    color:rgba(255, 255, 255, 0.6);
}
.guard-dialog-page .dialog .buttons {
    top:20px;
    visibility:hidden;
    opacity: 0;
    transition: 1s;
    position:relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.guard-dialog-page .dialog .buttons.shown {
    top: 0;
    opacity: 1;
    visibility:visible;
}
.guard-dialog-page .dialog .buttons .button {
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    color: #6dbe45;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:Wrap;
}
.guard-dialog-page .dialog .buttons .button .price{
    color:White;
    font-size:10px;
    margin:5px 0 0 0;
    width:100%;
}
.guard-dialog-page .dialog .results {
    margin: 0 0 20px 0;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    position: relative;
    transition: 1s;
    top: 20px;
    opacity: 0;
    visibility: hidden;
}
.guard-dialog-page .dialog .results.shown {
    top: 0;
    opacity: 1;
    visibility:visible;
}
.guard-dialog-page .dialog .results .result{
    display:flex;
    align-items:center;
    margin:0 0 10px 0;
}
.guard-dialog-page .dialog .results .result:last-child{
    margin:0;
}
.guard-dialog-page .dialog .results .result .label{
    font-size:12px;
    margin:0 10px 0;
    width:60%;
}
.guard-dialog-page .dialog .results .result .value{
    font-size:14px;
    font-weight:500;
}
.guard-dialog-page .dialog .results .result.green .value{
    color:#6dbe45;
}
.guard-dialog-page .dialog .results .result.red .value{
    color:red;
}

.users-admin-page .users .item {
    margin: 0 0 10px 0;
    border-radius: 10px;
    padding: 5px;
    display: flex;
    align-items: center;
}
.users-admin-page .users .item.game-access{
    outline:1px solid #6dbe45;
}
.users-admin-page .users .item .photo {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 0 0;
    overflow: hidden;
    border-radius: 5px;
}
.users-admin-page .users .item .photo img {
    width: 100%;
}
.users-admin-page .users .item .username {
    font-weight: 600;
    font-size:14px;
    color:White;
}

.user-admin-page{}
.user-admin-page .user-info-lines{
    padding:15px;
    border-radius:10px;
}
.user-admin-page .user-info-lines .line{
    display:flex;
    align-items:Center;
    justify-content:space-between;
    margin:0 0 5px 0;
    padding:0 0 5px 0;
    border-bottom:1px solid #1a1d28;
}
.user-admin-page .user-info-lines .line:last-child{
    margin:0;
    padding:0;
    border-bottom:none;
}
.user-admin-page .user-info-lines .line .label{
    font-size:14px;
}
.user-admin-page .user-info-lines .line .value{
    font-size:14px;
}