*{box-sizing: border-box;}
.views_container{
    position: relative;
    height: 600px;
}
.views_card{
    width: 150px;
    height: 200px;
    background-color: #f008;
    position: absolute;
    border: 1px solid;
}

.views_slot{
    width: 150px;
    height: 200px;
    background-color: #f99;
    border: 1px solid;
    position: absolute;
}

.views_player{
    display: flex;
    position: absolute;
}

.views_slot2{
    width: 150px;
    height: 200px;
    background-color: #f99;
    border: 1px solid;
    position: absolute;
}

.settings_open_button{
    background-color: #222;
    color: #ccc;
    border: none;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
}
.v_table{
    /*background-color: #0f09;
    width: 500px;
    height: 250px;
    position: absolute;*/
    background: linear-gradient(-10deg, #006e00, #9eea8c);
    width: 500px;
    height: 250px;
    position: absolute;
    border-radius: 30px;
    border: 5px solid #582903;
}

.v_pair{
    position: absolute;
}

.v_player{
    background-color: #18587899;
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 100%;
}

.v_player_1{
    border-radius: 40px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}

.v_player_2{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.v_player_3{
    border-radius: 40px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.v_player_4{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.v_player_5{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.v_my_player{
    /*background-color: #0f09;
    width: 300px;
    height: 200px;
    position: absolute;*/
    background-color: #18587899;
    width: 300px;
    height: 200px;
    position: absolute;
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
}

.v_wrapper{
    background-color: #8bafc3;
    width: 800px;
    height: 600px;
    position: relative;
    margin: auto;
    border-radius: 5px;
    overflow: hidden;
}

.player_controls{
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
    padding: 10px;
    background-color: #fff5;
    border-radius: 5px;
}

.player_button{
    background-color: #222;
    color: #ccc;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 0px 5px;
}

.player_button:hover{
    background-color: #444;
}
.card {
    /*width: 100px;
    height: 150px;*/
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 1000px;
    --c-phase: 0;
    margin: 0px;  
}

.card_base{
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    border: 2px solid #fff;
    border-radius: 5px;
    transition: 300ms;
}

.card_a{
    background-color: #f00;
    transform: rotateY(calc(180deg * var(--c-phase) / 100));
    box-shadow: inset -2px -2px 0px #fff, inset 2px 2px 0px #fff;
}

.card_b{
    background-color: #ff0;
    transform: rotateY(calc(180deg + (180deg * var(--c-phase) / 100)));
}

.card_img{
    width: 100%;
    height: 100%;
    --type: 0;
    --value: 0;
    background-image: url(78ec2054c83075a15128.png);
    background-size: calc(100% * 13) calc(100% * 5);
    background-position: calc(100% / 12  * var(--value)) calc(100% / 4 * var(--type));
}
.settings_wrapper{
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    padding: 20px;
    background-color: #4f86a1;
    border-radius: 5px;
}

.settings_count{

}

.count_header {
    margin: 5px;
}
.count_button{
    border: none;
    background-color: #ccc;
    margin: 5px;
}

.count_button_selected{
    background-color: #999;
}

.settings_close_button{
    background-color: #222;
    color: #ccc;
    border: none;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 2px;
    top: 2px;
    cursor: pointer;
}
.row {
  display: flex;
}

.cell {
  width: 30px;
  height: 30px;
  border: 1px solid;
  user-select: none;
  cursor: pointer;
}

.game_wrapper{
  position: relative;
  height: 100%;
  overflow: hidden;
  --size: 30px;
  --field-x: 10;
  --field-y: 10;
  width: 100%;
}

.field2 {
  position: absolute;
  /*overflow: hidden;*/
  width: calc(var(--size) * var(--field-x));
  height: calc(var(--size) * var(--field-y));
  top: 0;
  left: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cell2 {
  --posy:0;
  --posx:0;
  transition-timing-function: cubic-bezier(0.66, 0.25, 0.63, 1.26);
  position: absolute;
  width: var(--size);
  height: var(--size);
  /*border: 1px solid;*/
  user-select: none;
  cursor: pointer;
  top: calc(var(--size) * var(--posy));
  left: calc(var(--size) * var(--posx));
  transition-property: top, left, transform;
  transition-duration: 500ms;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell2_group{
  background-color: rgba(0, 0, 0, 0);
  width: calc(var(--size) * 2);
  height: calc(var(--size) * 2);
  padding: 1px;
}

.cell2_inner{
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 10px;
}

.cell2_from{
  animation: cell-hint 400ms infinite alternate-reverse;
}

.cell2_to{
  animation: cell-hint 400ms infinite alternate;
}

@keyframes cell-hint {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}


.cell-img{
    width: 80%;
    height: 80%;
    position: absolute;
    background-size: contain;
    /*top: 0;
    left: 0;*/
    background-repeat: no-repeat;
}

.game-top-wrapper{
  display: flex;
}

.game-bottom-wrapper{
  display: flex;
}

.game-top-moves{
  padding: 10px;
}

.game-top-counters{
  display: flex;
  padding: 10px;
}

.ani_cell{
  width: 100px;
  height: 100px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAACACAMAAAA1bk45AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAu5QTFRFAAAA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoA0IoAoSZ4WQAAAPp0Uk5TAFGg05ZFe+L42Gk+wfXzpyIcpPn/kBYusCQNfulc2tDDs4DqXRqi9I4V6PvfbUDH+q0jTpzRkkJaglAeEjh1MAooFAUHAw8dICUpBAkQCCZvstvZxpmowoQ6DM7u1VL9/p09My03RnKKjJiuxdzIASEyPBiJ4DFT8ff8aCfX7e/mbGqBZk1JQR9XyVmR408ZNExKOxMrSDap8va+i6bUvezNYnlhBsS0L4Pwl3bPpXzM0usCRFUsn0OVceTl597LG6yamwu8uY1etio1nsBLa2Wxt6uqOREOhhfKYFa/h1RYX2fWj6OIP916cK+FeJNzuG5kR7p/W7W74fv1ifIAAAnRSURBVHic7d1rWBNXGgDgaEWGSgIxUeRiUSNECNqIUi9gA3InihYKIgVnFLSmCIkIkqQIaFG5qaCIknqhq3YxrbWiIi1KQUBbsVarFRFqXa1K7a67de//NgkXCeRG55Bx9Xt/5Ik+85zvm3NmzplzMjPQaNQZNvyVERbUhR9piVm9Sl142ihrOsPGlsIEmKNZbPqYsVSFt7Nms9nj7KkKT3NwVMV3Gk9ZfFUNvKbKwJmyGrCboAo/kcIGmKSKz5lMWXwazcUVY3OnuFEWf5I7z2MqZdFptGmv81nTPSlMgDZjptcbs6gL7zl7zlxv6sLTfOa9OVXgS2ECqlHAbz6V4f0DAqkMT6MFBFAbHwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAsKDgkNGytc4LaQ6kz6Cg9ZFOz9XGU0RJiL34rw8Ih8Oyp6ScxSqpPpFTv5HU6ce/zMpS/8oyfLrDG2Bk6w+ct9KcrCdkVCYuLKVcPeXS16L2mNc7I7xiY0WaXYiRGFEEoEiWtTQxCVhsq6tDh2H+nrqUjCNsMmwl3KlfF58u5qfwa3ep+JJEimaEMWIzsnZWMwkuLIWCDY9EHuqmmbt4zamjuBp7W7yQKzZRHg48LMC2G6+OUX0PvXuhanQiQP4BWxuqJs225KcTuKt5bsHLVr2vbi0t1lW0btQdlqCXvLCYJg8zCFjI93JUX01MCHCOMY5rfPKo7BKOcyZAZrX21/LIJ4ggM9p1RMuPGtSw6W0xUKDMMUjAopQ0bnfvQHZGORwyG+/n21QRXFqNUGsuhnAoonwAXO3aUxDh8xurHnxwOOivQyBElouP1R/67KHVFFMaYy0uT6Z09A8gjyUSWOy1kKy6JM49tuxwZm8ckCFFmoxH6qo3QNgjgmQRTEqMp40xvgMxRdEE2SP+Z44ebZa03Z9n0dp+fnyJ5EF7gqca2icUzBJ9j4iWiRwPjZiYojvafZjdV/1Ww0T8EHCk+auukp7sA0yk8jyUItvHrTmUgMV4+8qnrne6TV7Hp3b/wXFmZ93N77S+vk2rPncmrP1p6r+8qLwx/YEOr/IbADr9abMa0upQ28gS3gugNpiPy0EWfOn3+vccTG6ibVv31szf22H/HJk4GBwkDVR6BYfDIwNndcpJKrUMgwujJbKq2qWzJ85mfNFy5+bYtqIjYYCefTczicbK2e6BukDfA8ig2+1LJ2d1h1S8KlMDsqX36iziVPUCxIrLlc3lv/shgkQxEYlMCgQ99u6+od8eQrVGfzEsr7bom0d3BKGaI38qg6YqE/Na/bEdvao7q6RiSvbGPR+cbjVx3fOOO6P2kD1vfSQDZsCAI6JI7ce+37idcdK83fwy3Iv1FwbN8PDkEOTQ59lgfEC24GNfk6LAxqamo1YdUAIaH3LWepXHV5SKgvEYkB64JHUQcU7/6yIUeunoER/AvmWwdtbfOZv65++4iP1Itw8rqUgtspzUXtyzrKttbM7ZjRvnrcj2vWvP36KxEeGw7eqTTnpXHlBZahCQkhIh0h+MpPV0ru/uluSca0sBX59y7efzYpZo0sOTwvyAyXfEdW/nysziqC07sI170eKGdhLBaGseR9Dzz8gjkXj6Pk+qpeIVV/fkKmcKFf++rvLek8HOfJ5YScz+LxcK1dzVbI4hpWoNoX/dpuGDrK+uM9cBj6lLqFJutJQs6nq6fGRBGJwiV3zuF6itd0Qd27+4EPst3RZydnMA3AdiJ/TASsG//w4Z1bMYVu/ga3exTHZg/s+eW9pwUx5ffn4N+uY3WjTwP0fGsY+vnwqnODagDZVdIR7fYqcRwn5HEzQw1u18JQ1wXOwrUa4dl3Mg3gY2PS3mZtGvqrwoWXdayz6CddRTZg+NSeY5hx2OByXEJ2d0Wzznp16lgPJdMFLZxiwr4yrBwv/f4Qpgq0jXLqHX7wAWd8P/Ik0rOf8OM9na9iqsEGCP62NxmCJ9exODiTRBZLb/M0l7aYNCurwqlCyi2Pq6rKqspS9ATCOcOXeZrnmk9cmet4NG1M4+jlv9y7+vhXjoHBqSJqD/lws+53F1dgpLCfIvWnojaORBb+eZtcl98ZuXh8qp+9fbVdpmfXR+XmPzfEJ0ck33eOmmfyajlizDleWTIej6/CY2Vbdqan13lE1ClVBwY3emUQggBjl10/kZzeeWz/lZtGtlwVtUE64MgnekfhNWjuz+jnpjdTEiqZb945p5bAoJaO/JLNd9vvlqVKYt1CJfXBeaF7/nLjyWlUs/PSUG8m07PU+IaxbanDa1n6usUfh6QBnlcnW1upibsoI63AnSFj8fq3Q9Zjil9Q/fIIX1vyqGxStnb9c9+k9AX1L5vYksh+ZwC/g+qcXiaxfx0wYccXU52UOc2XSEKrw9QfbRREF9s20vvXP5v4GW2QsYvC1hcnZgpmtJ+elphHzYCnh/8j0d9ey6m1tDx7bpvVN5NdyJYnvPT1vuufHxT9tsK0lb3Sp/E6ZuvEZbJ5dBF3+XuSO4fjxImTyviYMqfzYgua0slzyTjvpXXjUt0WkjOURUWcrpk3Pz7XhM0DMh90L5zxtH4eIPaSS0NDHJCx73LD9GvRSdu0hxiu2X/zDwyqd6lnMuvXOdCE4b5dd4QdaSoTOSv6X/5d9CUX6cmzw/kfu41vXuzck4BMa0GIOEMuDY0VzQqC0Ln+kmLma6ynzVUyOV/O49MPPEybGB2T6lZqd6/xK6WO3FJ2koqUUPesqHeMN0DiCR21oyafQyoNjZYIfZM8fLhZb8TZ1dynk1UfEYT7gYgsPTetssaQuj06IaK3JJnI6Gqv7z/1/SwWX0MmC43WKXoWmwjFh3NJlz4IASKjd4T2dd/wOr4xIvW9DQTBqzhxK8Hoxj5v6UxBYRX9LxOWMoxwa9ZT/x93hJh1lh1rPZj6x6+tIxXN/pD1gX8/+fRU3g4TLoKaHqtHXgJnsTB+z2IEy8rmaXEeqRy6C1+s8yTHU5A9fGCiAJHhdV9tvAckfyYStt40vYRK1wqZcs0vJTUWp38bnaxUYIzOmDBUdytUNrrLMK6CwWUo+ApuuepbubLKS2T8xERtl7VmDDCxIyog1wUN0pH1s3srxPPUo9StKH+lCve7YrGy5QeLWeqPmpUt8yxOVfsIEQYwOZGrNr8mJTWM+0+VCY0wnbq/0/niW+rqrjDcH+HxVP6d0hffzcySEbetOv9rKeXLCVyDT886u83Doy69Nt3DquCLsufs/tEXj7jtkm1bkyTjcGF++3e5hR2FwwTe3hK/RSF5kjB7H8M38wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP7//A8KVTcCwkO7UgAAAABJRU5ErkJggg==);
  background-size: calc(100% * 3) 100%;
  animation: 500ms ani_cell_keys infinite forwards;
  animation-timing-function: steps(3);
}

@keyframes ani_cell_keys{
  0%{
    background-position-x: 0;
  }

  100%{
    background-position-x: 300%;
  }
}
.base_popup_shadow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0006;
    display: flex;
    z-index: 10;
    justify-content: center;
    align-items: center;
}

.base_popup_window{
    background-color: #fff;
    width: 300px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: auto;
}

.base_screen{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.field_wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.field_row{
    display: flex;
}

.field_cell{
    background-color: rgb(0, 0, 0);
    border: 1px solid #400;
    --border-color: #0f0;
}

.field_cell_base{
    width: var(--size);
    height: var(--size);
}

.field_cell_top{
    border-top: 2px solid var(--border-color);
}

.gameScreen_wrapper{
    position: relative;
    height: 100%;
    overflow: hidden;
    width: 100%;
    padding: 10px;
    background-color: #222;
}

.field_cell_left{
    border-left: 2px solid var(--border-color);
}

.field_cell_right{
    border-right: 2px solid var(--border-color);
}

.field_cell_bottom{
    border-bottom: 2px solid var(--border-color);
}

.field_cell_rt{
    border-top-right-radius: 5px;
}

.field_cell_rb{
    border-bottom-right-radius: 5px;
}

.field_cell_lt{
    border-top-left-radius: 5px;
}

.field_cell_lb{
    border-bottom-left-radius: 5px;
}

.field_cell_empty{
    background-color: #ddd2;
    border: 1px solid #fff2
}
.editor_wrapper{
    position: relative;
    --size: 30px;
    --field-x: 10;
    --field-y: 10;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.editor_field{
    position: relative;
    height: 100%;
}

.tool{

}

.tool_selected{
    background-color: #999;
}

.editor_objects{
    position: absolute;
    pointer-events: none;
    width: calc(var(--size) * var(--field-x));
    height: calc(var(--size) * var(--field-y));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.level_list{
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    width: 400px;
    height: 525px;
    flex-shrink: 0;
}

.level_button_wrapper{
    margin: 5px;
    width: calc(100% / 3 - 10px);
    height: calc(100% / 4 - 10px);
}

.level_button{
    margin: 5px;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #99a;
}

.level_button:hover{
    background-color: #bbc;
}

.menu_header{
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 5px;
    font-size: 20px;
    font-family: sans-serif;
}

.level_button_complete{
   
}

.level_button_locked{
    background-image: url(3e780ed05b9a29819c8f.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 2px 5px;
}

.ani_wrapper{
    position: relative;
}

.ani_sprite{
    background-image: url(0d6a6bd2b9954e1f4767.png);
    background-repeat: no-repeat;
    position: absolute;
}

.ani_sprite2{
    background-image: url(059a12ddd268272a10fc.png);
    background-repeat: no-repeat;
    position: absolute;
}

.ani_head_group{
    width: 100px;
    height: 50px;
    transform-origin: center bottom;
    animation: rh_kf linear infinite 5.5s;
    position: absolute;
}

.ani_fc{
    background-position: 0px -25px;
    background-size: 100px 100px;
    width: 100px;
    height: 100px;
    top: 8px;
}

.ani_lh{
    background-position: 0px 0px;
    background-size: 100px 100px;
    width: 50px;
    height: 25px;
    transform-origin: center bottom;
    animation: rh_kf linear infinite 3.5s;
}

.ani_rh{
    background-position: -50px 0px;
    background-size: 100px 100px;
    width: 50px;
    height: 25px;
    left:50px;
    transform-origin: center bottom;
    animation: rh_kf linear infinite 3s;
}

.ani_body{
    background-position: 0px -26px;
    background-size: 120px 100px;
    width: 128px;
    height: 100px;
    left: -18px;
    transform-origin: center bottom;
    top: 48px;
    animation: body_kf linear infinite 2s;
}

.ani_mus{
    background-position: 0px 0px;
    background-size: 100px 100px;
    width: 100px;
    height: 25px;
    left: 2px;
    top: 35px;
    transform-origin: center bottom;
    animation: rh_kf linear infinite 7s;
}

@keyframes body_kf{
    0%{
        transform: scale(1, 1.00);
    }

    50%{
        transform: scale(1, 1.03);
    }

    100%{
        transform: scale(1, 1.00);
    }
}

@keyframes rh_kf{
    0%{
        transform: rotate(0deg);
    }

    30%{
        transform: rotate(-2deg);
    }

    70%{
        transform: rotate(3deg);
    }

    100%{
        transform: rotate(0deg);
    }
}
.row {
    display: flex;
  }
  
.cell {
    width: 30px;
    height: 30px;
    border: 1px solid #0002;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 21px;
    position: relative;
    color: #fff;
    border-radius: 3px;
    margin: 1px;
    background-color: #e8f5fe;
}

.cell_player{
    background-color: rgb(252, 185, 91);
}

.cell_value{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10px;
}

.cell_letter {
   /* background-color: rgb(255 100 193);
    border: 2px solid #923b95;
    border-top: 2px solid #e7acdd;
    border-left: 2px solid #e8a6e9;
    transform: scale(1.08);*/
    background-color: rgb(104 150 226);
    border: 2px solid #2a4795;
    border-top: 2px solid #a6caff;
    border-left: 2px solid #b5ceff;
    transform: scale(1.08);
}

.cell_input {
    background-color: rgb(252, 185, 91);
}

.cell_2w{
    background-color:rgb(168 231 168);
}

.cell_2l{
    background-color:rgb(185 227 255);
}

.cell_3w{
    background-color: rgb(255, 153, 153);
}
.cell_3l{
    background-color:rgb(255 229 133);
}
.cell_start{
    background-color:rgb(245, 60, 91);
}

.field_scroll {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 700px;
    min-height: 500px;
    overflow: hidden;
    margin: 0px;
    border: 3px solid #ccc;
    background: #fff;
    color: #fff
}

.field_content {
    position: absolute;
}

.bottom_panel{
    display: flex;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
}

.control_panel{
    background-color: #ffe3a1;
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid #ffb928;
}

.controlButtons_list{
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 5px;
}

.player_letters{
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 5px;
}

.cell_player_expand{
    padding-left: 30px;
}

.cell_ghost{
    background-color: #ffb928;
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

.showOptions_button{
    position: absolute;
    user-select: none;
    top: 2px;
    right: 2px;
}

.default_button{
    border: 2px solid #d6e7f9;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #8fbdde;
    color: #fff;
    border-bottom-color: #6e96ba;
    border-right-color: #6e96ba;
    cursor: pointer;
    margin: 0px 2px;
}

.default_button_inactive{
    border: 2px solid #ebebeb;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #cbd2d7;
    color: #f3f3f3;
    border-bottom-color: #b7bec4;
    border-right-color: #b7bec4;
    cursor: pointer;
    margin: 0px 2px;
}


.letterList_popup{
    position: absolute;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.letterList_popup_back{    
    padding: 10px 20px;
    padding-top: 30px;
    border: 2px solid #b8a785;
    border-top: 2px solid #fff0d3;
    border-left: 2px solid #fff0d3;
    box-shadow: #0004 2px 5px 8px;
    background-color: #ffe3a1;
    clip-path: polygon(0 0, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 0 100%);
}

.letterList_popup_back::before{
    content: '';
    position: absolute;
    right: -2px;
    top: -2px;
    background: #fff5d1;
    width: 54px;
    height: 54px;
    box-shadow: #0009 1px 1px 8px;
}

.letterList_closeButton{
    position: absolute;
    right: 8px;
    top: 8px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: none;
    user-select: none;
    background: rgb(253 110 34);
    color: #fff;
    font-size: 16px;
    box-shadow: #0009 1px 1px 3px;
    cursor: pointer;
    z-index: 3;
}

.letterList_wrapper{
    display: flex;
    flex-wrap: wrap;
    width: calc((30px + 2px) * 7);
}

.letterList_cell{
    background-color: rgb(252, 185, 91);
}

.letterList_cell_empty{
    background-color: #999;
}

.letterList_item{

}

.letterList_count{
    font-size: 11px;
    color: #a96300;
    text-align: center;
    margin-bottom: 5px;
}

.letterList_header{
    border-bottom: 1px solid #c48400;
    color: #c48400;
    font-weight: bold;
    margin-bottom: 10px;
}
.letterListOpenButton_wrapper{
    position: absolute;
    bottom: 10px;
    left: 10px;
    border: 2px solid #b8a785;
    border-top: 2px solid #fff0d3;
    border-left: 2px solid #fff0d3;
}

.letterListOpenButton_button{
    display: block;
    border: none;
    background-color: rgb(252, 185, 91);
    width: 50px;
    height: 50px;
    color: #fff;
    user-select: none;
    cursor: pointer;
}

.letterListOpenButton_count{
    font-size: 16px;
}
.player_wrapper{
    background-color: #ffb928;
    border: 1px solid #0000;
    border-radius: 3px;
    padding: 2px 5px;
    margin: 3px 0px;
    display: flex;
    min-width: 130px;
}

.player_wrapper_current{
    background-color: #ffb928;
    border: 1px solid #f00;
}

.player_ava{
    width: 30px;
    height: 30px;
    border-radius: 100%;
    flex-shrink: 0;
    border: 1px solid #fff;
    margin: 3px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.player_name{
    font-size: 12px;
}

.player_score{
    font-size: 14px;
}
.playerList_wrapper{
    position: absolute;
    background-color: #ffe3a1;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #b8a785;
    border-top: 2px solid #fff0d3;
    border-left: 2px solid #fff0d3;
    right: 2px;
    bottom: 2px;
    box-shadow: #0004 2px 5px 8px;
    user-select: none;
}
.wordResult_popup{
    position: absolute;
    background-color: #ffe3a1;
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid #b8a785;
    border-top: 2px solid #fff0d3;
    border-left: 2px solid #fff0d3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: #0004 2px 5px 8px;
}

.wordResult_score{
    font-size: 40px;
    color: #fff;
    margin: auto;
    text-align: center;
    font-family: arial;
    -webkit-text-stroke: #b8a785 1px;
}

.cell_show{
    animation: showLetter 700ms forwards linear;
    animation-delay: var(--delay);
    transform: scale(0);
}

.cell_shown{
    transform: scale(1);
}


.cell_boost_2w{
    transform: scale(1);
    animation-delay: var(--delay);
    animation: boost_2w 700ms forwards linear;
}

.cell_boost_2l{
    transform: scale(1);
    animation-delay: var(--delay);
    animation: boost_2l 700ms forwards linear;
}

.cell_boost_3w{
    transform: scale(1);
    animation-delay: var(--delay);
    animation: boost_3w 700ms forwards linear;
}

.cell_boost_3l{
    transform: scale(1);
    animation-delay: var(--delay);
    animation: boost_3l 700ms forwards linear;
}

.cell_boosted_2w{
    background-color: #090;
}

.cell_boosted_2l{
    background-color: #99f;
}

.cell_boosted_3w{
    background-color: #f66;
}

.cell_boosted_3l{
    background-color: rgb(255, 238, 51);
    border-color: rgb(255, 149, 0);
    -webkit-text-stroke: #b8a785 1px;
}

@keyframes showLetter{
    0% {
        transform: scale(0);
    }

    20% {
        transform: scale(0.3);
    }

    50% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1.2);
    }

    100%{
        transform: scale(1);
    }
}

@keyframes boost_2w{
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        background-color: #090;
    }

    100%{
        transform: scale(1);
        background-color: #090;
    }
}

@keyframes boost_2l{
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
        background-color: #99f;
    }

    100%{
        transform: scale(1);
        background-color: #99f;
    }
}

@keyframes boost_3w{
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        background-color: #f66;
    }

    100%{
        transform: scale(1);
        background-color: #f66;
    }
}

@keyframes boost_3l{
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.6);
        background-color: rgb(255, 238, 51);
        border-color: rgb(255, 149, 0);
        -webkit-text-stroke: #b8a785 1px;
    }

    100%{
        transform: scale(1);
        background-color: rgb(255, 238, 51);
        border-color: rgb(255, 149, 0);
        -webkit-text-stroke: #b8a785 1px;
    }
}
.optionsPopup_popup{
    position: absolute;
    background-color: #ffe3a1;
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid #b8a785;
    border-top: 2px solid #fff0d3;
    border-left: 2px solid #fff0d3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: #0004 2px 5px 8px;
}

.optionsPopup_header{
    border-bottom: 1px solid #c48400;
    color: #c48400;
    font-weight: bold;
    margin-bottom: 10px;
}

.optionsPopup_group_header{
    color: #c48400;
    margin-bottom: 5px;
}

.optionsPopup_select{
    margin-bottom: 10px;
}

.optionsPopup_buttons_group{
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.select_button{
    border: none;
    background-color: rgb(252, 185, 91);
    border-radius: 3px;
    padding: 3px 5px;
    margin: 2px;
    cursor: pointer;
}
.select_button:first-child{
    margin-left: 0px;
}

.select_button_active{
    background-color: #ff6100;
}
.gameResult_popup{
    position: absolute;
    background-color: #ffe3a1;
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid #b8a785;
    border-top: 2px solid #fff0d3;
    border-left: 2px solid #fff0d3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: #0004 2px 5px 8px;
}
.avatarEditor_wrapper{
    padding: 10px;
    background-color: #000;
    width: fit-content;
    color: #fff;
    user-select: none;
}

.avatarEditor_fileInput{
    display: none;
}

.avatarEditor_fileLabel{
    display: flex;
    width: fit-content;
    color: #ccc;
    background-color: #222;
    padding: 5px 10px;
    border-radius: 3px;
    margin: 5px;
    width: 100px;
    text-align: center;
    justify-content: center;
}
.avatarEditor_fileLabel:hover{
    background-color: #333;
}

.avatarEditor_canvas{
    display: block;
}

.avatarEditor_canvas_area{
    position: relative;
}

.avatarEditor_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    
    text-shadow: #000 1px 1px 1px, #000 -1px -1px 1px;
}

.avatarEditor_overlay_drop{
    background-color: #fff5;
    outline: 2px #0f0 solid;
}

.avatarEditor_overlay_drag{
    background-color: #fff3;
    outline: 2px #ff0 solid;
}

.avatarEditor_overlay_empty{

}

.avatarEditor_scaleBlock{
    display: flex;
    width: 100%;
    align-items: center;
}

.avatarEditor_buttonsBlock{
    display: flex;
    width: 100%;
    justify-content: center;
}

.avatarEditor_scaleRange{
    display: block;
    width: 100%;
    margin-top: 7px;
    margin-left: 7px;
}

.avatarEditor_submitButton{
    display: flex;
    width: fit-content;
    color: #fff;
    background-color: #f50;
    padding: 5px 10px;
    border-radius: 3px;
    margin: 5px;
    border: none;
    font-family: inherit;
    font-size: inherit;
    width: 100px;
    text-align: center;
    justify-content: center;
}

.avatarEditor_submitButton_inactive{
    color: #666;
    background-color: #222;
}

.avatarEditor_submitButton:hover{
    background-color: rgb(255, 116, 47);
}

.avatarEditor_submitButton_inactive:hover{
    color: #666;
    background-color: #222;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none; 
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    height: 6px;
    background: #ccc;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none; 
    height: 15px;
    width: 15px;
    background-color: #f50;
    border-radius: 50%;
    border: none;
    transition: .2s ease-in-out;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background-color: #f50;
    border-radius: 50%;
    border: none;
    transition: .2s ease-in-out;
}

/* Hover, active & focus Thumb: Webkit */

input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 4px rgba(255,85,0, .1)
}

input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px rgba(255,85,0, .2)
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px rgba(255,85,0, .2)
}

/* Hover, active & focus Thumb: Firfox */

input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(255,85,0, .1)
}

input[type="range"]:active::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(255,85,0, .2)
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(255,85,0, .2)    
}

.aniSlider{
    position: relative;
    display: flex;
    justify-content: center;
}

.aniSlider_wrapper{
    display: flex;
    --cols: 1;
    --offset: 0;
    background: #224;
    padding: 10px;
    width: 100%;
}

.aniSlider_arrowZero{
    display: flex;
    align-items: center;
    width: 0;
    position: relative;
    z-index: 1;
}

.aniSlider_arrowZero_right{
    justify-content: flex-end;
}

.aniSlider_arrowButton{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHN0cm9rZT0iI2ZmZiIgIHN0cm9rZS13aWR0aD0iMTBweCIgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiAKCSB2aWV3Qm94PSItMTAgLTEwIDM0MCAzNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBpZD0iWE1MSURfMjIyXyIgZD0iTTI1MC42MDYsMTU0LjM4OWwtMTUwLTE0OS45OTZjLTUuODU3LTUuODU4LTE1LjM1NS01Ljg1OC0yMS4yMTMsMC4wMDEKCWMtNS44NTcsNS44NTgtNS44NTcsMTUuMzU1LDAuMDAxLDIxLjIxM2wxMzkuMzkzLDEzOS4zOUw3OS4zOTMsMzA0LjM5NGMtNS44NTcsNS44NTgtNS44NTcsMTUuMzU1LDAuMDAxLDIxLjIxMwoJQzgyLjMyMiwzMjguNTM2LDg2LjE2MSwzMzAsOTAsMzMwczcuNjc4LTEuNDY0LDEwLjYwNy00LjM5NGwxNDkuOTk5LTE1MC4wMDRjMi44MTQtMi44MTMsNC4zOTQtNi42MjgsNC4zOTQtMTAuNjA2CglDMjU1LDE2MS4wMTgsMjUzLjQyLDE1Ny4yMDIsMjUwLjYwNiwxNTQuMzg5eiIvPgo8L3N2Zz4=);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    opacity: 0.5;
}

.aniSlider_arrowButton_left{
    transform: scaleX(-1);
}

.aniSlider_arrowButton:hover{
    opacity: 0.8;
}

.aniSlider_slides{
    width: 100%;
    overflow: hidden;

    border-radius: 10px;
}

.aniSlider_slide{
    flex-shrink: 0;
    width: calc(100% / var(--cols));
    transform: translateX(calc(-100% + var(--offset)));
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.660, -0.160, 0.200, 1.235);
    padding: 5px;
}

.aniSlider_slides_rescaler{
    display: flex;
    width: calc(100% + 2 * 5px);
    position: relative;
    left: -5px;
}

.aniSlider_slide_no_transition{
    transition-duration: 0ms;
}

.aniSlider_slide_move_left{
    animation: move_left 400ms forwards;
    /*animation-timing-function: cubic-bezier(0.660, -0.160, 0.200, 1.235);*/
}

.aniSlider_slide_move_right{
    animation: move_right 400ms forwards;
   /* animation-timing-function: cubic-bezier(0.660, -0.160, 0.200, 1.235);*/
}

.aniSlider_slide_move_left_force{
    animation: move_left 100ms forwards linear;
    /*animation-timing-function: cubic-bezier(0.660, -0.160, 0.200, 1.235);*/
}

.aniSlider_slide_move_right_force{
    animation: move_right 100ms forwards linear;
   /* animation-timing-function: cubic-bezier(0.660, -0.160, 0.200, 1.235);*/
}

.aniSlider_slide_content{
    width: 100%;
    height: 300px;
    background-color: #f99;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: #fff9;
    user-select: none;
}

.aniSlider_slide_content1{
    background-color: #fc9;
}

.aniSlider_slide_content2{
    background-color: #9c9;
}

.aniSlider_slide_content3{
    background-color: #99f;
}

.aniSlider_pagination{
    position: absolute;
    bottom: 5px;
    display: flex;
    gap: 10px;
}

.aniSlider_pagination_button{
    border: none;
    padding: 0;
    margin: 0;
    width: 50px;
    height: 5px;
    background-color: #ccc;
}
.aniSlider_pagination_button_active{
    border: none;
    padding: 0;
    margin: 0;
    width: 50px;
    height: 5px;
    background-color: #090;
}


@keyframes move_left{
    0%{
        transform: translateX(-200%);
    }
    100%{
        transform: translateX(-100%);
    }
}

@keyframes move_right{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}


.proCard_wrapper{
    background-color: #224;
    padding: 10px 0px;
    color: #ccc;
    width: calc((100% - (var(--cols) - 1)* var(--gap)) / var(--cols));
    display: flex;
    flex-direction: column;
}

.proCard_title{
    padding: 0px 0px;
    font-size: 31px;
    line-height: 33px;
    display: flex;
    border-bottom: 1px #ccc solid;
}
.proCard_title_border{
    clip-path: polygon(0 10px, 10px 0, calc(100% - 40px) 0, 100% 40px, 0 40px);
    background-color: #ccc;
    border: 1px transparent solid;
    border-bottom: none;
    position: relative;
    top:1px;
}

.proCard_title_back{
    background: linear-gradient(0deg, #224, #191738);
    clip-path: polygon(0 10px, 10px 0, calc(100% - 40px) 0, 100% 40px, 0 40px);
    padding: 0px 10px;
    padding-right: 40px;
    padding-top:5px;
}

.proCard_technologies{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 10px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.proCard_technology_1{
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 18px;
    line-height: 16px;
}
.proCard_technology{
    font-family: arial;
    font-size: 12px;
    padding: 1px 10px;
    border: 1px solid #3eac3c;
    border-radius: 18px;
    color: #5fe55d;
    line-height: 16px;
    background: linear-gradient(45deg, #00600b80, transparent);
    box-shadow: #000 1px 1px 4px;
}

.proCard_text{
    width: 50%;
}

.proCard_links{
    display: flex;
    gap:10px;
    padding: 10px 10px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-shadow: 3px 6px 10px -3px #0005;
}

.proCard_center{
    display: flex;
    gap: 30px;    
    padding: 10px 10px;
    align-items: flex-start;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    height: 100%;
}

.proCard_img{
    width: 100%;
    background-color: #4a75cc;
    position: relative;
}

.proCard_img_unwrapped{
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 2;
}

.proCard_full_exit{
    border: none;
    font-size: 0px;
    border-radius: 5px;
    background-color: #fff9;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iUmVzcG9uc2l2ZS1zY2FsZXMiPgoJPHBhdGggZD0iTTQ0Ljg0NTE5OTYsMTguNTA1ODk5NGgtOGMtMC41NTI3LDAtMSwwLjQ0NzMtMSwxczAuNDQ3MywxLDEsMWg1LjU4NTk5ODVMMzIuNDMxMDk4OSwzMC41MDY5MDA4bDEuNDE0MTAwNiwxLjQxMzk5OTYKCQlsMTAtMTAuMDAwODAxMVYyNy41MDQ5YzAsMC41NTI3OTkyLDAuNDQ3MywxLDEsMXMxLTAuNDQ3MjAwOCwxLTF2LTcuOTk5MDAwNQoJCUM0NS44NDUxOTk2LDE4Ljk1MzE5OTQsNDUuMzk3ODk5NiwxOC41MDU4OTk0LDQ0Ljg0NTE5OTYsMTguNTA1ODk5NHoiLz4KCTxwYXRoIGQ9Ik0yMi4zMTc4MDA1LDQyLjA5MTgwMDdMMTAuODQ1MTk5Niw1My41NjQ0OTg5di02LjA1ODU5NzZjMC0wLjU1MjctMC40NDczLTEtMS0xcy0xLDAuNDQ3My0xLDF2Ny45OTkwMDA1CgkJYzAsMC41NTI3OTkyLDAuNDQ3MywxLDEsMWg4YzAuNTUyNywwLDEtMC40NDcyMDA4LDEtMWMwLTAuNTUyNy0wLjQ0NzMtMS0xLTFoLTUuMTEyMjk5OWwxMC45OTg5OTk2LTEwLjk5OTAwMDUKCQlMMjIuMzE3ODAwNSw0Mi4wOTE4MDA3eiIvPgoJPHBhdGggZD0iTTU3LjMwNDE5OTIsMEgxNi43ODg0OTk4QzEzLjQ5NDYwMDMsMCwxMC44MTM5LDIuNjgwNzAwMSwxMC44MTM5LDUuOTc0N3Y0LjExODEwMDJINi42OTQ3OTk5CgkJYy0zLjI5MzksMC01Ljk3MzU5OTksMi42ODA3MDAzLTUuOTczNTk5OSw1Ljk3NDU5OTh2NDEuOTU4MDAwMkMwLjcyMTIsNjEuMzE5NDAwOCwzLjQwMDg5OTksNjQsNi42OTQ3OTk5LDY0aDQwLjUxNjU5NzcKCQljMy4yOTM4OTk1LDAsNS45NzQ2MDE3LTIuNjgwNTk5Miw1Ljk3NDYwMTctNS45NzQ2MDE3di0yLjY3NjY5NjhoNC4xMTgxOTg0YzMuMjkzODk5NSwwLDUuOTc0NjAxNy0yLjY4MDcwMjIsNS45NzQ2MDE3LTUuOTc0NjAxNwoJCVY1Ljk3NDdDNjMuMjc4ODAxLDIuNjgwNzAwMSw2MC41OTgwOTg4LDAsNTcuMzA0MTk5MiwweiBNNTEuMTg2MDAwOCw1OC4wMjUzOTgzCgkJQzUxLjE4NjAwMDgsNjAuMjE2ODAwNyw0OS40MDI4MDE1LDYyLDQ3LjIxMTM5OTEsNjJINi42OTQ3OTk5QzQuNTAzMzk5OCw2MiwyLjcyMTIsNjAuMjE2ODAwNywyLjcyMTIsNTguMDI1Mzk4M1YxNi4wNjc0CgkJYzAtMi4xOTEzOTk2LDEuNzgyMTk5OS0zLjk3NDU5OTgsMy45NzM1OTk5LTMuOTc0NTk5OGg0MC41MTY1OTc3YzIuMTkxNDAyNCwwLDMuOTc0NjAxNywxLjc4MzIwMDMsMy45NzQ2MDE3LDMuOTc0NTk5OFY1OC4wMjUzOTgzCgkJeiBNNjEuMjc4ODAxLDQ5LjM3NDA5OTdjMCwyLjE5MTM5ODYtMS43ODMxOTkzLDMuOTc0NjAxNy0zLjk3NDYwMTcsMy45NzQ2MDE3aC00LjExODE5ODRWMTYuMDY3NAoJCWMwLTMuMjkzODk5NS0yLjY4MDcwMjItNS45NzQ1OTk4LTUuOTc0NjAxNy01Ljk3NDU5OThIMTIuODEzOVY1Ljk3NDdDMTIuODEzOSwzLjc4MzI5OTksMTQuNTk3MTAwMywyLDE2Ljc4ODQ5OTgsMmg0MC41MTU3MDEzCgkJYzIuMTkxNDAyNCwwLDMuOTc0NjAxNywxLjc4MzI5OTksMy45NzQ2MDE3LDMuOTc0N1Y0OS4zNzQwOTk3eiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.proCard_runDemo{
    border-radius: 50%;
    width: 100px;
    border: 15px #0009 solid;
    background: transparent;
    height: 100px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3ZnLWljb24iIHZpZXdCb3g9IjAgMCA4OTAgMTAyNCIgc3Ryb2tlLXdpZHRoPSIxNXB4IiBzdHJva2U9IiNmZmYiIGZpbGw9IiMwMDA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg5MS4xNjEgNTEybC03NDkuOTkyIDQ1MHYtOTAwbDc0OS45OTIgNDUweiIgIC8+PC9zdmc+);
    background-size: 48px;
    color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
}

.proCard_runDemo_out{
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px #fff solid;
}

.proCard_runDemo_in{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px #fff solid;
    display: flex;
    flex-shrink: 0;
}


.proCard_runDemo span{
    max-width: 13px;
    margin-left: -10px;
    line-height: 6px;
    font-size: 8px;
}

.proCard_runDemo:hover{
    border: 15px #0009 solid;
    background-color: #fff6;
}

.proCard_img::before{
    content: "";
    display: block;
    padding-bottom: 70%;
}

.proCard_img_content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.proCard_img_ext{
    object-fit: contain;
    object-position: center;
    position: relative;
    display: block;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    height: 100%;
}

.demo_iframe{
    display: block;
    border: none;
    height: 100%;
    width: 100%;
}

.proCard_link{
    background-color: #66c4a6;
    padding: 5px 10px;
    transform: skewX(-15deg);
    margin-left: 7px;
    box-shadow: 1px 1px 0px #2b3f40, 3px 2px 0px #3b8a8d;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    color: #fff;
    text-shadow: 1px 1px 0px #3b3b3b;
    user-select: none;
    cursor: pointer;
}

.proCard_link:hover{
    background-color: #7fe7c6;
}

.proCard .aniSlider{
    height: 100%;
}

.proCard .aniSlider_wrapper{
    height: 100%;
    padding: 0px;
}

.proCard .aniSlider_slide{
    overflow: hidden;
    padding: 0px 5px;
}

.proCard .aniSlider_slide_content{
    height: 100%;
    left: unset;
    top: unset;
}

.proCard .aniSlider_slides_rescaler{
    height: 100%;

}

.proCard_img_slide {
    object-fit: contain;
    object-position: center;
    position: relative;
    display: block;
    height: 100%;
}

.thick_font_wrapper{  
    position: relative;
    font-family: arial;
    font-weight: bolder;
}
.thick_font_top{
    color: #000;
    position: relative;
    font-weight: bolder;
    background-clip: text;
    padding: 0px 3px;
}

.thick_font_border{
    padding: 0px 3px;
    color: #0000;
    position: absolute;
    font-weight: bolder;
    background-clip: text;
    background-image: linear-gradient(180deg, #00b677, #006ba5);
    -webkit-text-stroke: 6px;
}

@media (max-width: 600px) {
    .proCard_center{
        flex-direction: column;
    }
    .proCard_text{
        width: 100%;
    }
}
.wheel_section{

}

.wheel_text_container{
    position: relative;
}

.wheel_text{
    position: absolute;   
    font-weight: 900;
    font-size: 65px;
}

.wheel_text_0{
    position: relative;
    color: transparent;
    background-image: linear-gradient(yellow, orange);
    background-clip: text;
}

.wheel_text_1{
    color: transparent;
    text-shadow: brown 0px 1px 2px, brown 1px 1px 1px, brown 1px 2px 1px, brown 2px 2px 1px, brown 2px 3px 0px, brown 3px 3px 0px, brown 4px 3px 0px , brown 5px 3px 0px,
    black 5px 5px 8px, black 5px 5px 7px, black 5px 5px 3px;
    user-select: none;
}

.wheel_text_2{
    position: relative;
    color: transparent;
    background-image: linear-gradient(rgb(73, 140, 255), rgb(18, 18, 119));
    background-clip: text;
}

.wheel_text_3{
    --sh: rgb(144 123 163);
    color: transparent;
    text-shadow: var(--sh) 0px 1px 2px, var(--sh) 1px 1px 1px, var(--sh) 1px 2px 1px, var(--sh) 2px 2px 1px, var(--sh) 2px 3px 0px, var(--sh) 3px 3px 0px, var(--sh) 4px 3px 0px , var(--sh) 5px 3px 0px,
    black 5px 5px 8px, black 5px 5px 7px, black 5px 5px 3px;
    user-select: none;
}

.wheel_rotate{
    transform: rotate(1645deg);
    transition-duration: 3s;
    transition-property: transform;
    border-radius: 100%;
    border: 3px solid brown;
    width: 300px;
    height: 300px;
    /*background: conic-gradient( 
     red 0deg 36deg, 
     orange 36deg calc(36deg * 2), 
     yellow calc(36deg * 2) calc(36deg * 3), 
     green calc(36deg * 3) calc(36deg * 4), 
     blue calc(36deg * 4) calc(36deg * 5), 
     purple calc(36deg * 5) calc(36deg * 6),
     red calc(36deg * 6) calc(36deg * 7), 
     orange calc(36deg * 7) calc(36deg * 8), 
     yellow calc(36deg * 8) calc(36deg * 9), 
     green calc(36deg * 9) calc(36deg * 10)
     );*/
     --sector: 18deg;
     background: radial-gradient(#224 0% 30%, transparent 30% calc(90% / 1.41), rgb(255, 162, 0) calc(90% / 1.41), rgb(255, 187, 86) calc(100% / 1.41)), repeating-conic-gradient( 
        rgb(206, 50, 50) 0deg,
        rgb(127, 36, 36) calc(var(--sector) - 1deg),
        rgb(196, 196, 196) calc(var(--sector) - 1deg),
        rgb(110, 110, 110) calc(var(--sector)),
        rgb(45, 36, 95) var(--sector), 
        rgb(26, 20, 55) calc(var(--sector) * 2 - 1deg), 
        rgb(196, 196, 196) calc(var(--sector) * 2 - 1deg),
        rgb(110, 110, 110) calc(var(--sector) * 2)
    );
}
.spinDigit_container{
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 30px;
    overflow: hidden;
    background-color: grey;
    color: white;
    font-size: 20px;
    position: relative;
}

.spinDigit_digit{
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    transition-duration: 2s;
    transition-property: top;
}

.spinDigit_digit_animate{
    animation: digit_spin 2s infinite backwards linear;
}

.spinDigit_digit_in{
    transition-timing-function: ease-in;
}

.spinDigit_digit_out{
    transition-timing-function: ease-out;
}

@keyframes digit_spin{
    0%{
        top:0%;
    }
    100%{
        top:-1000%;
    }
}

.spinNumber_container{
    display: flex;
}
.slot_wrapper{
    overflow: hidden;
    width: 800px;
    height: 600px;
    display: flex;
}

.slot_reel{
    height: 100%;
    width: calc(100% / 5);
    display: flex;
    flex-direction: column;
}

.slot_symbol{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff0;
    font-size: 50px;
    border-radius: 20px;
}

.slot_symbol_animation{
    height: calc(100% / 3);
    width: 100%;
    flex-shrink: 0;
    padding: 10px;
}

.slot_symbol_a{
    background-color: rgb(188, 77, 77);
}

.slot_symbol_b{
    background-color: rgb(73, 76, 184);
}

.slot_symbol_c{
    background-color: rgb(181, 73, 182);
}

.slot_symbol_move{
    animation: move_down 100ms forwards linear;
}

@keyframes move_down{
    0%{
        transform: translateY(-200%);
    }
    100%{
        transform: translateY(-100%);
    }
}
.wf_wrapper{
    --base: 1px;
    width:calc(var(--base) * 800);
    height:calc(var(--base) * 565);
    position: relative;
    overflow: hidden;
    margin: auto;
}

.wf_field{
    position: relative;
    width: 100%;
    height:calc(var(--base) * 300);
}

.wf_animal{
    position: absolute;
    width:calc(var(--base) * 10);
    height:calc(var(--base) * 10);
    background-color: #f00;
    transition: 1s linear
}

.wf_item{
    position: absolute;
    width:calc(var(--base) * 10);
    height:calc(var(--base) * 10);
    background-color: #00f;
}

.wf_basePopup{
    position: absolute;
    padding:calc(var(--base) * 10);
    background-color: #fff;
    top:calc(var(--base) * 0);
    left:calc(var(--base) * 0);
    display: flex;
    width:calc(var(--base) * 500);
    height:calc(var(--base) * 300);
}

.wf_basePopup_shade{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0009;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wf_basePopup_close{
    position: absolute;
    top: 0;
    right: 0;
}

.wf_gameScreen{
    position: relative;
    width: 100%;
    height: 100%; 
    background-color: #43723f;
    user-select: none;
}

.wf_centralZone{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width:calc(var(--base) * 500);
    height:calc(var(--base) * 300);
}

.wf_animalsZone{
    background-color: #ba9658;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2 * calc(var(--base) * 80));
    height: 100%;
}

.wf_factory_buildButtons{
    position: absolute;
    left: -1calc(var(--base) * 0);
    right: auto;
    bottom:calc(var(--base) * 0);    
    transform: translate(-100%, 0);
}

.wf_factory_buildButtons_right{
    position: absolute;
    left: auto;
    right: -1calc(var(--base) * 0);  
    transform: translate(100%, 0);
}

.wf_factory_buildButton{
    width:calc(var(--base) * 50);
    border-radius:calc(var(--base) * 5);
    border: none;
    background-color: #75a7fd;
    margin-top:calc(var(--base) * 5);
    display: block;
}

.wf_factorySlot{
    background-color: #ba9658;
    position: absolute;
    width:calc(var(--base) * 81);
    height:calc(var(--base) * 80);
    --br:calc(var(--base) * 20);
    z-index: -1;
}

.wf_factorySlot_1{
    left: 0%;
    top: 0%;
    transform: translate(0%, 0%);
    border-top-left-radius: var(--br);
    border-bottom-left-radius: var(--br);
    z-index: -1;
}
.wf_factorySlot_2{
    left: 0%;
    top: 50%;
    transform: translate(0%, -50%);
    border-top-left-radius: var(--br);
    border-bottom-left-radius: var(--br);
}
.wf_factorySlot_3{
    left: 0%;
    top: 100%;
    transform: translate(0%, -100%);
    border-top-left-radius: var(--br);
    border-bottom-left-radius: var(--br);
}
.wf_factorySlot_4{
    right: 0%;
    top: 0%;
    transform: translate(0%, 0%);
    border-top-right-radius: var(--br);
    border-bottom-right-radius: var(--br);
}
.wf_factorySlot_5{
    right: 0%;
    top: 50%;
    transform: translate(0%, -50%);
    border-top-right-radius: var(--br);
    border-bottom-right-radius: var(--br);
}
.wf_factorySlot_6{
    right: 0%;
    top: 100%;
    transform: translate(0%, -100%);
    border-top-right-radius: var(--br);
    border-bottom-right-radius: var(--br);
}

.wf_waterSlot{
    left: 50%;
    top: -40%;
    transform: translate(-50%, 40%);
    border-radius: var(--br);
}
.wf_carSlot{
    left: 20%;
    top: 137%;
    transform: translate(-20%, -140%);
    border-bottom-left-radius: var(--br);
    border-bottom-right-radius: var(--br);
}
.wf_planeSlot{
    left: 80%;
    top: 137%;
    transform: translate(-80%, -140%);
    border-bottom-left-radius: var(--br);
    border-bottom-right-radius: var(--br);
}
.wf_storageSlot{
    left: 50%;
    top: 140%;
    transform: translate(-50%, -140%);
    z-index: -1;
}

.wf_flying_container{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
}

.wf_flying_item{
    position: absolute;
    width:calc(var(--base) * 24);
    height:calc(var(--base) * 24);
    animation: flying 1s forwards linear;
    offset-rotate: 0deg;
}

@keyframes flying{
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

.wf_paused{
     animation-play-state: paused !important;
}

.wf_icon{
    background-size: cover;
    background-repeat: no-repeat;
    width:calc(var(--base) * 24);
    height:calc(var(--base) * 24);
}

.wf_progress_wrapper{
    width: 100%;
    height:calc(var(--base) * 6);
    border-radius:calc(var(--base) * 3);
    border:calc(var(--base) * 1) solid #999;
    background-color: #fff;
}

.wf_progress{
    height: 100%;
    background-color: #43723f;
}
.wf_animal{
    position: absolute;
    width:calc(var(--base) * 45);
    height:calc(var(--base) * 45);
    transform: translate(-50%, -50%);
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    transition-property: transform, left, top;
    z-index: 2;
    pointer-events: none;
 }
 
.wf_collectable{
   position: absolute;
    width:calc(var(--base) * 28);
    height:calc(var(--base) * 28);
    background-color: transparent; 
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.wf_collectable_timeout{
    animation: timeout 250ms infinite alternate;
}

@keyframes timeout{
    0%{
        opacity: 1;
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 0.5;
    }
    100%{
        opacity: 0.5;
    }
}

.wf_collectable_remove{
    animation: remove 500ms;
}


@keyframes remove{
    0%{
        transform: scale(1);
    }
    20%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(0);
    }
}

.wf_factory_wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.wf_factory{
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: relative;
}

.wf_factory_type{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.wf_factory_upgrade{
    margin:calc(var(--base) * 0);
    font-size:calc(var(--base) * 10);
    display: block;
    width: 100%;
}

.wf_factory_working{
    animation: working 500ms infinite linear;
    transform-origin: center bottom;
}

@keyframes working{
    0%{
        transform: scale(1, 1);
    }

    25%{
        transform: scale(1.1, 0.9);
    }

    50%{
        transform: scale(1, 1);
    }

    75%{
        transform: scale(0.9, 1.1);
    }

    100%{
        transform: scale(1, 1);
    }
}
.wf_water_wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.wf_water{
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: relative;
}

.wf_water_upgradeButton{
    position: absolute;
    transform: translate(calc(var(--base) * 0), -100%);
}

.wf_car_wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.wf_car{
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: relative;
}

.wf_car_hl{
    position: absolute;
    opacity: 0;
}

.wf_car_hl_active{
    opacity: 1;
    position: absolute;
    filter: blur(calc(var(--base) * 5)) brightness(12.5);
}

.wf_car_upgrade{
    position: absolute;
    top: 100%;
    right: 0;
}
.wf_plane_wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.wf_plane{
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: relative;
}
.wf_storage_back{
    background-size: contain;
    background-repeat: no-repeat;
    width: 170%;
    height: 170%;
    position: absolute;
    top: calc(50% - calc(var(--base) * 10));
    left: 50%;
    transform: translate(-50%, -50%);
}
.wf_storage{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    height: 100%;
    width: fit-content;
    align-items: flex-start;
    justify-content: flex-start;
    padding:calc(var(--base) * 18);
    padding-top:calc(var(--base) * 48);
    padding-bottom:calc(var(--base) * 10);
}

.wf_storage_item{
    width:calc(var(--base) * 10);
    height:calc(var(--base) * 10);
    background-color: #0009;
    background-size: contain;
    background-repeat: no-repeat;
    margin:calc(var(--base) * 2);
}

.wf_storage_upgradeButton_wrapper{
    width: 100%;
}

.wf_storage_upgradeButton{
    display: flex;
    margin: auto;
}
.wf_grass{
    border-radius: 100%;
    width:calc(var(--base) * 16);
    height:calc(var(--base) * 16);
    background-color: #0f00;
    opacity: 0.5;
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}
.wf_moneyIndicator_wrapper {
    position: relative;
    z-index: 2;   
    display: flex;
}

.wf_moneyIndicator_baseSum {
    border:calc(var(--base) * 3) solid #c0730e;
    border-left: none;
    border-top: none;
    border-bottom-right-radius:calc(var(--base) * 5);
    padding:calc(var(--base) * 2)calc(var(--base) * 5);
}

.wf_transaction {
    position: absolute;
    top: 0;
    left: 0;
}

.wf_transaction_negative {
    color: #f00;
    text-shadow: #fff calc(var(--base) * 0)calc(var(--base) * 0)calc(var(--base) * 3);
    animation: transactionNeg 2s forwards;
}

.wf_transaction_positive {
    color: #0f0;
    text-shadow: #000000 calc(var(--base) * 0)calc(var(--base) * 0)calc(var(--base) * 3);
    animation: transactionPos 2s forwards;
}

@keyframes transactionPos{
    0%{
        opacity: 1;
        transform: translate(-2calc(var(--base) * 0), calc(var(--base) * 50));
    }

    100%{
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes transactionNeg{
    0%{
        opacity: 1;
        transform: translate(0, 0);
    }

    100%{
        opacity: 1;
        transform: translate(calc(var(--base) * 20), calc(var(--base) * 50));
    }
}
.wf_movingPanel{
    position: absolute;
    right: 0;
    top: 0;
    width:calc(var(--base) * 200);
    height:calc(var(--base) * 80);
    background-color: #ffd874;
    margin:calc(var(--base) * 2);
    padding:calc(var(--base) * 0);
    border-radius:calc(var(--base) * 5);
    border:calc(var(--base) * 3) solid #c0730e;
    color: #955e16;
    font-weight: bold;
}

.wf_movingCar{
    position: absolute;
    width:calc(var(--base) * 20);
    height:calc(var(--base) * 20);
    background-color: #20b85a;
    bottom:calc(var(--base) * 5);
    left:calc(var(--base) * 0);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:calc(var(--base) * 11);
}

.wf_movingCar_active{
    animation: moveCarAni 1s forwards linear;
}

.wf_movingPlane{
    bottom:calc(var(--base) * 27);
}

@keyframes moveCarAni{
    0%{
        left: 0%;
        transform: translate(0, 0);
    }
    40%{
        left: 100%;
        transform: translate(-100%, 0);
    }
    50%{
        left: 100%;
        transform: translate(-100%, 0) rotateY(180deg);
    }
    90%{
        left: 0%;
        transform: translate(0, 0) rotateY(180deg);
    }
    100%{
        left: 0%;
        transform: translate(0, 0);
    }
}

.wf_missions_container{
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.wf_missions{
    display: flex;
}

.wf_missionItem{
    position: relative;
    background-color: #ffd874;
    margin:calc(var(--base) * 2);
    padding:calc(var(--base) * 0);
    font-size:calc(var(--base) * 9);
    width:calc(var(--base) * 65);
    height:calc(var(--base) * 65);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius:calc(var(--base) * 5);
    border:calc(var(--base) * 3) solid #c0730e;
    color: #955e16;
    font-weight: bold;
}

.wf_missionItem_value{
    font-size:calc(var(--base) * 12);
}

.wf_missionItem_complete{
    background-color: #00b463;
    margin:calc(var(--base) * 2);
    padding:calc(var(--base) * 5);
}

.wf_missionItem_img{
    width:calc(var(--base) * 32);
    height:calc(var(--base) * 32);
    background-repeat: no-repeat;
    background-size: contain;
}

.wf_missionItem_ok{
    width:calc(var(--base) * 16);
    height:calc(var(--base) * 16);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom:calc(var(--base) * 5);
    right:calc(var(--base) * 5);
}
.wf_animalsPanel{
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    height:calc(var(--base) * 50);

    background-color: #ffd874;
    margin:calc(var(--base) * 2);
    padding:calc(var(--base) * 0);
    border-radius:calc(var(--base) * 5);
    border:calc(var(--base) * 3) solid #c0730e;
    color: #955e16;
    font-weight: bold;
}

.wf_addAnimal_item{
    font-size:calc(var(--base) * 11);
    margin:calc(var(--base) * 5);
    padding:calc(var(--base) * 5);
    background-color: #955e16;
    color: #ffd874;
    border-radius:calc(var(--base) * 5);
    border:calc(var(--base) * 1) solid #c0730e;
}

.wf_addAnimal_item_disabled{
    background-color: #ffd874;
    color: #955e16;
}
.wf_carPopup{
    position: relative;
    padding:calc(var(--base) * 10);
    background-color: #fff;
    top:calc(var(--base) * 0);
    left:calc(var(--base) * 0);
    display: flex;
    width:calc(var(--base) * 500);
    height:calc(var(--base) * 300);
}

.wf_carPopup_close{
    position: absolute;
    top: 0;
    right: 0;
}

.wf_carPopup_storageBlock{
    width: 100%;
    padding-right:calc(var(--base) * 5);
    padding-top:calc(var(--base) * 30);
    background-color: #ffe0b0;
    overflow-y: auto;
}

.wf_carPopup_storageList{

}

.wf_carPopup_storageItem{
    display: flex;
    background-color: #ccc;
    padding:calc(var(--base) * 2);
    margin:calc(var(--base) * 0)calc(var(--base) * 0);
    align-items: center;
    justify-content: space-between;
}

.wf_carPopup_storageItem:nth-child(2n){
    background-color: #aaa;
}
                    
.wf_carPopup_carBlock{
    width: 100%;
    padding-left:calc(var(--base) * 5);
    padding-top:calc(var(--base) * 30);
    background-color: #95d898;
}

.wf_carPopup_carList{

}

.wf_carPopup_carItem{
    display: flex;
}

.wf_carPopup_slots{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #936d3b;
    padding:calc(var(--base) * 20)calc(var(--base) * 0);
    border-top-right-radius:calc(var(--base) * 30);
    border-top-left-radius:calc(var(--base) * 30);
}

.wf_carPopup_slot{
    width:calc(var(--base) * 30);
    height:calc(var(--base) * 30);
    border:calc(var(--base) * 1) solid;
}

.wf_carPopup_storageItem_img{
    width:calc(var(--base) * 32);
    height:calc(var(--base) * 32);
    background-repeat: no-repeat;
    background-size: contain;
}

.wf_carPopup_totalSum{
    display: flex;
    align-items: center;
    background-color: #5e99ff;
    width: fit-content;
    margin:calc(var(--base) * 10) auto;
    padding:calc(var(--base) * 2)calc(var(--base) * 5);
    border-radius:calc(var(--base) * 5);
    color: #fff;
}

.wf_carPopup_sellButton{
    display: block;
    margin: auto;
}

.wf_carPopup_totalSum div{
    margin-right:calc(var(--base) * 10);
}
.wf_productSlot{
    width:calc(var(--base) * 55);
    height:calc(var(--base) * 50);
    position: relative;
    border:calc(var(--base) * 1) solid;
    border-radius:calc(var(--base) * 3);
    padding:calc(var(--base) * 3);
    margin:calc(var(--base) * 3);
}

.wf_productSlot_image{
   width: 100%;
   height: 100%;
   background-size: contain;
   background-repeat: no-repeat;
}

.wf_productSlot_counts{
    position: absolute;
    top: 0;
    right: 0;    
    display: flex;
    flex-direction: column-reverse;
}

.wf_productSlot_countItem{
    width:calc(var(--base) * 3);
    height:calc(var(--base) * 3);
    margin:calc(var(--base) * 1);
    background-color: #999;
}

.wf_productSlot_countItem_filled{
    background-color: #0f0;
}

.wf_winPopup{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:calc(var(--base) * 16);
    background-color: #9ec57c;
    border-radius:calc(var(--base) * 5);
    border:calc(var(--base) * 3) solid #c0730e;
}

.wf_winPopup_header{
    display: flex;
    justify-content: center;
    text-align: center;
    font-size:calc(var(--base) * 30);
    font-weight: bold;
    letter-spacing:calc(var(--base) * 3);
    -webkit-text-stroke:calc(var(--base) * 1);
    -webkit-text-stroke-color: #c2811a;
    color: transparent;
    background-clip: text;
    background-image: linear-gradient(45deg, #ffa03f 40%, #fff4e3 50%, #ffa03f 60%);
}
.wf_planePopup{
    position: relative;
}

.wf_planePopup_planePanel{
    width: 100%;
}

.wf_planePopup_storePanel{
    width: 100%;
}
.wf_mainMenu_wrapper{
    width:calc(var(--base) * 800);
    height:calc(var(--base) * 600);
    user-select: none;
    position: relative;
}

.wf_mainMenu_editTools{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.wf_editorTool{

}

.wf_editorTool_active{
    background-color: #9f9;
}

.wf_mainMenu_back{
    position: relative;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(0e81bf35afb4a35cc397.png);
}

.wf_mainMenu_levelButton{
    position: absolute;
    width:calc(var(--base) * 35);
    height:calc(var(--base) * 35);
    background-color: rgba(211, 205, 28, 0.866);
    border-radius: 100%;
    border:calc(var(--base) * 2) solid rgb(144, 120, 14);
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: #000 calc(var(--base) * 1)calc(var(--base) * 1)calc(var(--base) * 1);
    color: #fff;
}

.wf_mainMenu_levelButton_completed{
    background-color: rgba(9, 213, 40, 0.866);
    border:calc(var(--base) * 2) solid rgb(35, 119, 17);
}

.wf_mainMenu_levelButton_locked{
    background-color: rgba(145, 145, 145, 0.866);
    border:calc(var(--base) * 2) solid rgb(59, 59, 59);
}

.wf_mainMenu_debugPassLevel{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    background: #909;
    width:calc(var(--base) * 12);
    height:calc(var(--base) * 12);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:calc(var(--base) * 8);
    border:calc(var(--base) * 2) solid #515;
    color: #ccc;
}
.message_wrapper{
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    font-size:calc(var(--base) * 20);
    text-shadow: #000 calc(var(--base) * 0)calc(var(--base) * 0)calc(var(--base) * 10);
    pointer-events: none;
    animation: messageAni 2s forwards linear;
    transform: translate(-50%, -50%);
}

@keyframes messageAni{
    0% {
        top: 100%;
        transform: translate(-50%, 0%);
    }

    20% {
        top: 60%;
        transform: translate(-50%, -50%);
    }

    80% {
        top: 40%;
        transform: translate(-50%, -50%);
    }

    100% {
        top: 0%;
        transform: translate(-50%, -100%);
    }
}
.vectorizer_images{
    display: flex;
    width: 100%;
    gap: 10px;
}
.vectorizer_dest{
    width: 100%;
}

.vectorizer_dest-svg{
    width: 100%;
}

.vectorizer_source{
    width: 100%;
}

.vectorizer_source-canvas{
    width: 100%;
}

.vectorizer_top{
    overflow: hidden;
}
.wf_cell{
    width: 15px;
    height: 15px;
    border: 1px dotted #fff4;
    font-size: 15px;
    line-height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d76b00;
    background-color: #000;
    font-family: monospace;
    flex-shrink: 0;

    width: 10px;
    height: 10px;
    font-size: 12px;
    line-height: 10px;
    letter-spacing: -7px;
    justify-content: left;
    padding-left: 2px;
}

.canvas{
    border: 1px dotted #f00;
}
.pg_page{
    font-family: Arial, Helvetica, sans-serif;
}

.pg_other_projects{
 
}

.pg_main_projects_list{
    display: flex;
    flex-wrap: wrap;
    --cols: 2;
    --gap: 10px;
    gap: var(--gap);
    background-color: #224;
    padding: 0px 10px;
}

.pg_other_projects_wrapper{
    background-color: #224;
    padding: 10px 10px;
    color: #ccc;
}

.pg_other_projects_title{
    padding: 00px 0px;
    font-size: 36px;
    margin-bottom: 20px;
}

.pg_other_projects_text{
    margin-bottom: 20px;
}

.pg_other_projects_list{
    display: flex;
    flex-wrap: wrap;
    --cols: 3;
    --gap: 10px; 
    gap: var(--gap);
}

@media (max-width: 1000px) {
    .pg_main_projects_list{
        --cols:1;
    }
    .pg_other_projects_list{
        --cols:2;
    }
}

@media (max-width: 600px) {
    .pg_other_projects_list{
        --cols:1;
    }
}

.smallCard{
    border: 1px solid #384a89;
    background-color: #354062;
    border-radius: 5px;
    padding: 10px;
    width: calc((100% - (var(--cols) - 1)* var(--gap)) / var(--cols));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap:5px;
}

.smallCard_button{
    border: none;
    text-decoration: none;
}

.smallCard_title{
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: bold;
    color: #ddd;
}

.smallCard_text{
    margin-bottom: 10px;
}

.smallCard_preview{
    margin-bottom: 10px;
    display: flex;
    gap: 5px;
}

.smallCard_preview_item{
    width: 100%;
    display: block;
}

.smallCard_preview img{
    width: 100%;
    display: block;
}

.smallCard_links{
    display: flex;
}

.pg_footer{
    background-color: #222;
    border-top: #ccc 1px solid;
    color: #ccc;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
}

.pg_footer_left{
    display: flex;
    gap: 20px;
}

.pg_footer_hire_text{
    max-width: 240px;
    font-size: 12px;
    margin-bottom: 15px;
}

.pg_footer_hire_list{
    font-size: 12px;
}

.pg_footer_corner{
    align-self: flex-end;
}

.pg_footer_section_title{
    font-size: 18px;
    color: #ddd;
    font-weight: bold;
    margin-bottom: 10px;
}

.pg_footer_contacts_block{
    border-left: #ccc 1px dashed;
    padding-left: 10px;
}

.pg_footer_contacts_title{

}

.pg_footer_contact{
    display: flex;
    gap: 10px;
    padding: 5px 0px;
    align-items: center;
    font-size: 14px;
}

.pg_footer_contact_logo{

}

.ico_github{
    background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjkyIiB2aWV3Qm94PSIwIDAgOTMgOTIiIHdpZHRoPSI5MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtLjg3NjQwNC4wNjkxNTNoOTEuNTYxOHY5MS41NjE4aC05MS41NjE4eiIgZmlsbD0ibm9uZSIvPjxwYXRoIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0ibTQ2LjYzNCAyMS4wNjkyYy0xNC4yMzExIDAtMjUuNzU3NiAxMS40NzA0LTI1Ljc1NzYgMjUuNjMyMyAwIDExLjM0MjMgNy4zNzMxIDIwLjkyMjQgMTcuNjExNyAyNC4zMTg3IDEuMjg3OS4yMjQzIDEuNzcwOS0uNTQ0NyAxLjc3MDktMS4yMTc1IDAtLjYwODgtLjAzMjItMi42Mjc0LS4wMzIyLTQuNzc0MS02LjQ3MTYgMS4xODU1LTguMTQ1OS0xLjU3LTguNjYxLTMuMDExOC0uMjg5OC0uNzM2OS0xLjU0NTUtMy4wMTE4LTIuNjQwMi0zLjYyMDUtLjkwMTUtLjQ4MDctMi4xODkzLTEuNjY2MS0uMDMyMi0xLjY5ODIgMi4wMjg1LS4wMzIgMy40NzczIDEuODU4NCAzLjk2MDMgMi42MjczIDIuMzE4MiAzLjg3NjkgNi4wMjA4IDIuNzg3NSA3LjUwMTkgMi4xMTQ3LjIyNTMtMS42NjYxLjkwMTUtMi43ODc1IDEuNjQyLTMuNDI4My01LjczMS0uNjQwOC0xMS43MTk3LTIuODUxNi0xMS43MTk3LTEyLjY1NiAwLTIuNzg3NS45OTgxLTUuMDk0NCAyLjY0MDItNi44ODg3LS4yNTc2LS42NDA4LTEuMTU5MS0zLjI2ODEuMjU3NS02Ljc5MjYgMCAwIDIuMTU3Mi0uNjcyOCA3LjA4MzQgMi42Mjc0IDIuMDYwNi0uNTc2OCA0LjI1LS44NjUxIDYuNDM5NC0uODY1MXM0LjM3ODguMjg4MyA2LjQzOTQuODY1MWM0LjkyNjEtMy4zMzIzIDcuMDgzMy0yLjYyNzQgNy4wODMzLTIuNjI3NCAxLjQxNjcgMy41MjQ1LjUxNTEgNi4xNTE4LjI1NzYgNi43OTI2IDEuNjQyIDEuNzk0MyAyLjY0MDEgNC4wNjkxIDIuNjQwMSA2Ljg4ODcgMCA5LjgzNjQtNi4wMjA4IDEyLjAxNTItMTEuNzUxOSAxMi42NTYuOTMzNy44MDEgMS43Mzg3IDIuMzM4OSAxLjczODcgNC43NDIgMCAzLjQyODMtLjAzMjIgNi4xODM4LS4wMzIyIDcuMDQ4OSAwIC42NzI4LjQ4MjkgMS40NzM4IDEuNzcwOCAxLjIxNzUgMTAuMTc0Mi0zLjM5NjMgMTcuNTQ3NC0xMy4wMDg0IDE3LjU0NzQtMjQuMzE4NyAwLTE0LjE2MTktMTEuNTI2Ni0yNS42MzIzLTI1Ljc1NzYtMjUuNjMyM3oiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-size: 56px;
    background-position: center;
    width: 32px;
    height: 32px;
}

.ico_linkedin{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQnPjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIGhlaWdodD0iMzJweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMCIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PGNpcmNsZSBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGN4PSIxNiIgY3k9IjE2IiBmaWxsPSIjMDA3QkI1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHI9IjE2Ii8+PGc+PHJlY3QgZmlsbD0iI0ZGRkZGRiIgaGVpZ2h0PSIxNCIgd2lkdGg9IjQiIHg9IjciIHk9IjExIi8+PHBhdGggZD0iTTIwLjQ5OSwxMWMtMi43OTEsMC0zLjI3MSwxLjAxOC0zLjQ5OSwydi0yaC00djE0aDR2LThjMC0xLjI5NywwLjcwMy0yLDItMmMxLjI2NiwwLDIsMC42ODgsMiwydjhoNHYtNyAgICBDMjUsMTQsMjQuNDc5LDExLDIwLjQ5OSwxMXoiIGZpbGw9IiNGRkZGRkYiLz48Y2lyY2xlIGN4PSI5IiBjeT0iOCIgZmlsbD0iI0ZGRkZGRiIgcj0iMiIvPjwvZz48L2c+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PC9zdmc+);
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: center;
    width: 32px;
    height: 32px;
}
.pg_corp_block{
    --cellSize: 46px;
    font-size: calc(var(--cellSize)* 0.18);
    font-family: Arial, Helvetica, sans-serif;
    opacity: 1;
    cursor: default;
}

.pg_corp_site{
    font-size: calc(var(--cellSize)* 0.225);
}

.pg_corp_link{
    display: flex;
    align-items: baseline;
}

.pg_demo_a {
    padding: calc(var(--cellSize)* 0.01) calc(var(--cellSize)* 0.1);
    padding-left: calc(var(--cellSize)* 0);
    font-size: calc(var(--cellSize)* 0.33);
    color: #ccf;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: calc(var(--cellSize)* 0.1);
    font-family: Arial, Helvetica, sans-serif;
    border-right: calc(var(--cellSize)* 0.1) dotted #334;
}

.pg_demo_s{
    color: #fff;
}
.topSection{
  
}

.topSection_wrapper{
    /*background-color: #224;*/
    color: #ccc;
    display: flex;
    gap: 0px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #ccc;
}

.topSection_left{
    width: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
    padding: 10px 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #224;
}

.topSection_mid1{
    background-color: #224;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    width: 50px;
    transform: scale(1.05);
    height: 100%;
}

.topSection_mid2{
    background-color: #224;
    clip-path: polygon(0 0, 100% 0, 0% 100%, 0% 100%);
    width: 50px;
    transform: scale(1.05);
    height: 100%;
}

.topSection_midcp1{
    clip-path: polygon(100% 0, 0% 100%, 52% 100%);
}

.topSection_midcp2{
    clip-path: polygon(50% 0, 100% 0, 0% 100%, -50% 100%);
}
.topSection_mid_group{
    position: relative;
    flex-shrink: 0;
}

.topSection_mid2_op{
    opacity: 0.7;
    position: absolute;
    top: 0;
    left: 5px;
    background-color: #000;
}


.topSection_mid1_op{
    opacity: 1;
    position: absolute;
    top: 0;
    left: -1px;
    background-color: #ffffff;
}

.topSection_right{
    position: relative;
    padding: 10px 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #224;
}

.topSection_back{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.topSection_name{
    font-size: 11px;
}

.topSection_title{
    z-index: 1;
    font-size: 50px;
    color: #ccc;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 42px;
    position: relative;
    left: -3px;
    max-width: 300px;
}

.topSection_text_wrapper{
    position: relative;
    text-shadow: #000 1px 1px 5px;
}

.topSection_text_title{
    font-size: 22px;
    font-weight: bold;
    max-width: 320px;
}

.topSection_text{
    font-size: 11px;
    max-width: 320px;
}

.wheel_section{
    transform: scale(1.3);
}

.topSection_bg{
    position: absolute;
    top: 0;
    right: 0;
}

@media (max-width: 600px) {
    .topSection_wrapper{
        flex-direction: column;
    }

    .topSection_title{
        z-index: 1;
        text-shadow: #000 1px 1px 5px;
    }

    .topSection_name{
        z-index: 1;
        position: relative;
        text-shadow: #000 1px 1px 5px;
    }
}
.paralax{
    width: 100%;
    height: 100%;
}

.paralax_picture{
    background-image: url(32193c1e4338213a51a4.png);
    width: 100%;
    height: 100%;
    /*background-size: 18%;*/
    background-repeat: repeat;
}
*{
    box-sizing: border-box;
}
body{
    margin: 0;
}
.root_block{
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header_menu{
    display: flex;
    padding: 2px 5px;
    padding-bottom: 0px;
    border-bottom: 3px solid #001;
    background-color: #223;
}

.header_button {
    background-color: #334;
    border: none;
    margin: 5px;
    padding: 5px 20px;
    color: #fff;
}

.header_button:hover{
    background-color: #556; 
}

.header_button_selected{
    background-color: #99b;
}

.logo{
    padding: 5px 10px;
    padding-left: 5px;
    font-size: 20px;
    color: #ccf;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    font-family: Arial, Helvetica, sans-serif;
    border-right: 3px dotted #334;
}

.logo_s{
    color: #fff;
}


/*# sourceMappingURL=main.css.map*/