a {
   text-decoration: none;
}

.btn {
   width: 100%;
   height: auto;
   display: table;
   padding: 15px 0;
   border: 1px solid #fe4f5f;
   border-radius: 10px;
   background: var(--red);
   font-weight: 700;
   font-size: 16px;
   line-height: 156%;
   color: #fff;
   text-align: center;
}

.btn-mini {
   width: auto;
   height: auto;
   display: table;
   padding: 5px 15px;
   border: 1px solid #fe4f5f;
   border-radius: 10px;
   background: var(--red);
   font-weight: 500;
   font-size: 14px;
   line-height: 156%;
   color: #fff;
   text-align: center;
}

.btn-mini:hover {
   opacity: 0.8;
}

.max-z-index {
   position: relative;
   z-index: 5;
   color: #fff;
}

.lk-modals {
   width: 100%;
   height: 100%;
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 4;
   background: rgba(0, 0, 0, 0.5);
}

@keyframes bounceIn {
   0% {
      opacity: 0;
      transform: scale(0.3) translate(30px, -30px);
   }

   50% {
      opacity: 1;
      transform: scale(1.05);
   }

   70% {
      transform: scale(0.9);
   }

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

@keyframes pulse {
   0% {
      transform: scale(1);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   }

   50% {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
   }

   100% {
      transform: scale(1);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   }
}

.lk-modals .qrcode {
   position: absolute;
   top: 50px;
   right: 25px;
   border-radius: 12px;
}

.lk-modals .qrcode .close {
   position: absolute;
   top: 2px;
   right: 3px;
   font-size: 15px;
   color: var(--red);
}

.lk-modals .qrcode img.arrow {
   position: absolute;
   top: -45px;
   left: 60px;
   z-index: 1;
}

.lk-modals .qrcode .bg {
   border-radius: 5px;
   width: 183px;
   height: 77px;
   display: block;
   background: #fff;
   padding: 7px;
   margin-top: 25px;
   position: relative;
   z-index: 2;

   animation: bounceIn 0.8s ease forwards, pulse 2s infinite 1s;
   transform-origin: center;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.lk-modals .qrcode .bg p {
   font-weight: 400;
   font-size: 15px;
   line-height: 140%;
   color: #222;
}

@keyframes highlight {
   from {
      text-shadow: 0 0 0 rgba(255, 82, 82, 0);
   }

   to {
      text-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
   }
}

.lk-modals .qrcode .bg p span {
   color: #fc5a5b;
   animation: highlight 1.5s infinite alternate;
}

.lk-modals .qrcode {}

.lk-modals .qrcode {}

@media only screen and (max-width: 1180px) {

   #tasksTop .item {
      width: calc(33.33% - 16px);
   }

   nav .menu a span {
      display: none;
   }

   .navOther.wrapper {
      gap: 0px 25px;
      flex-wrap: wrap;
   }

   #editProfile form,
   #editProfile form .column {
      gap: 15px;
   }

   #editProfile form .column {
      width: 100% !important;
   }

   #editProfile .notification {
      margin-top: 0px;
   }

   #my-orders .order .product {
      gap: 10px;
   }

   #my-orders .order .product .name {
      font-size: 14px;
   }

   #my-orders .order .product .weight,
   #my-orders .order .product .filling {
      min-width: 50px;
   }

   #finanse .table {
      width: 100%;
   }

   #employee .table .tr .td.sts {
      min-width: 150px;
   }

   #employee .table .tr .td,
   #employee .table .tr .td *:not(.mso) {
      font-size: 12px !important;
   }

   #employee .table .tr .td .product .picture,
   #employee .table .tr .td .product picture {
      width: 30px;
      min-width: 30px;
      height: 30px;
   }

   #employee .table .tr {
      padding: 20px 10px;
   }

   #employee .table .tr .td.list-products {
      min-width: 330px;
   }

   #employee .table .tr .td .w300 {
      min-width: 200px !important;
   }

   #employee .table .tr .td .product .column {
      min-width: 65px;
   }

   #employee .table .tr .td.list-products-big {
      min-width: 700px;
   }

   #employee .table .tr .td.list-products-big-690 {
      min-width: 390px;
   }

   #employee .table .tr.names {
      display: none;
   }

   #employee .table .tr .td.delivery {
      min-width: 80px;
   }

   #employee .table .tr .td .mso {
      font-size: 22px;
   }
}

@media only screen and (max-width: 780px) {

   .wrapper {
      padding-left: 10px !important;
      padding-right: 10px !important;
   }

   body {
      background: url("../../images/bg.webp") no-repeat center center;
      background-size: cover;
      /* background: url("../images/bg-footer.webp") no-repeat center bottom var(--red) !important; */
   }

   #header-mobile {
      width: 100%;
      height: auto;
      display: block;
      /* background: linear-gradient(180deg, #fc5a5b 0%, #fff 100%); */
      padding: 15px 0;
   }

   #header-mobile img {
      width: 160px;
      display: block;
   }

   #header-mobile .wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   #header-mobile .right {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
   }

   #header-mobile .right picture {
      border: 1px solid #fc5a5b;
      border-radius: 255px;
      width: 35px;
      height: 35px;
      overflow: hidden;
   }

   #header-mobile .right a.icon {
      font-size: 30px;
   }

   /* #header-mobile .right a.icon.qr_code {
      position: relative;
      z-index: 5;
      color: #fff;
   } */

   #header-mobile .right a.icon:not(.max-z-index) {
      color: var(--black);
   }

   #header-mobile .right a.icon.active {
      color: var(--red);
   }

   #conteiner {
      width: 100%;
      height: auto;
      min-height: 500px;
      display: table;
      border-radius: 15px;
      padding: 17px 0;
      background: #fff;
      z-index: 2;
   }

   #conteiner .titleBig {
      font-size: 22px;
      margin: 0;
      margin-bottom: 10px;
   }

   #conteiner .navOther {
      gap: 10px 20px;
      margin: 0;
      flex-wrap: wrap;
      margin-bottom: 20px;
   }

   #conteiner .navOther a {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
      /* test */
      color: var(--black)
   }

   #conteiner .navOther a.active {
      color: var(--red);
   }

   #qrcode {
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      width: 300px;
      height: 365px;
      display: block;
      margin: 22px auto 40px;
      padding: 25px 27px;
      background: linear-gradient(180deg, #fc5a5b 0%, #fff 100%);
   }

   #qrcode picture {
      margin: 0 auto;
      border-radius: 10px;
      width: 100%;
      height: auto;
      display: block;
      padding: 25px;
      background: #fff;
   }

   #qrcode .data {
      width: 100%;
      height: auto;
      display: block;
      margin: 16px auto 0;
   }

   #qrcode .data .balance {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 5px;
      font-weight: 500;
      /* test: 300 */
      font-size: 10px;
      color: var(--black);
      margin-bottom: 14px;
   }

   #qrcode .data .balance b {
      font-size: 16px;
   }

   #qrcode .name {
      font-weight: 500;
      font-size: 16px;
      width: 100%;
      color: var(--black);
   }

   #qrcode .name span {
      display: block;
      margin-top: 1px;
      font-size: 10px;
   }

   #tasks {
      width: 300px;
      height: auto;
      display: table;
      margin: 0 auto;
   }

   #tasks section {
      margin-bottom: 23px;
   }

   #tasks section .name {
      font-weight: 500;
      font-size: 16px;
      line-height: 140%;
      color: #424242;
      margin-bottom: 10px;
   }

   #tasks section .task {
      padding: 10px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.25);
      border-top: 1px solid red;
      border-radius: 10px;
      position: relative;
      margin-bottom: 18px;
   }

   #tasks section .task:last-child {
      margin-bottom: 0px;
   }

   #tasks section .task picture {
      margin-right: 20px;
      width: 80px;
      min-width: 80px;
      height: 80px;
      border-radius: 255px;
   }

   #tasks section .task .center {
      width: auto;
      height: auto;
      display: table;
      padding-right: 28px;
   }

   #tasks section .task .center .money {
      font-weight: 700;
      font-size: 12px;
      line-height: 100%;
      color: var(--red);
      display: flex;
      align-items: center;
      gap: 2px;
      margin-bottom: 5px;
   }

   #tasks section .task .center .text {
      font-weight: 500;
      font-size: 14px;
      line-height: 140%;
      color: #424242;
   }

   #tasks section .task .circle {
      position: absolute;
      top: 12px;
      right: 10px;
      border: 1px solid #d9d9d9;
      border-radius: 255px;
      width: 24px;
      height: 24px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   #tasks section .task .circle span {
      border-radius: 255px;
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(229, 229, 229, 0.5);
      font-size: 12px;
      color: #fff;
   }

   #tasks section .task .circle.active span {
      background: var(--red);
   }

   .editProfile {
      width: max-content;
      height: auto;
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 25px;
      font-weight: 500;
      /* test */
      font-size: 18px;
      line-height: 139%;
      color: var(--black);
      margin: 120px auto;
      box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
      border: 1px solid var(--black);
      border-radius: 30px;
   }

   #my-orders .order {
      padding: 12px 10px;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 0px;
      margin-top: 20px;
      background: rgba(229, 229, 229, 0.5);

   }

   #my-orders .order .column {
      width: 100%;
   }

   #my-orders .order .button {
      position: unset;
      border-radius: 10px;
      font-size: 12px;
   }

   #my-orders .order .button i {
      font-size: 12px;
   }

   #my-orders .order .top .id,
   #my-orders .order .top .date,
   #my-orders .order .amount {
      font-size: 12px;
   }

   #my-orders .order .product {
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 5px;
      margin-bottom: 15px;
   }

   #my-orders .order .product picture {
      width: 20%;
      min-width: 20%;
      height: 25px;
      order: 1;
   }

   #my-orders .order .product .name {
      width: 45%;
      font-size: 12px;
      order: 2;
   }

   #my-orders .order .product .weight,
   #my-orders .order .product .filling {
      font-size: 10px;
      order: 3;
      min-width: 48px;
   }

   #my-orders .order .product .price {
      font-size: 12px;
      order: 4;
      min-width: auto;
   }

   #my-orders .order .data {
      gap: 14px;
   }

   #my-orders .order .data .item {
      width: 100%;
   }

   #my-orders .order .data .item b {
      font-weight: 300;
      font-size: 10px;
      color: rgba(0, 0, 0, 0.5);
      margin-bottom: 0px;
   }

   #my-orders .order .data .item span {
      font-weight: 500;
      /* test */
      font-size: 12px;
      color: #424242;
   }

   #my-orders .address {
      background: #e5e5e5;
      margin-top: 10px;
      margin-bottom: 0px;
      padding: 10px;
   }

   #my-orders .address .name {
      font-size: 11px;
   }

   #employee .table .tr {
      flex-wrap: wrap;
      gap: 5px;
   }

   #employee .table .tr {
      padding: 10px;
      align-items: center;
   }

   #employee .table .tr.names .td {
      font-size: 14px;
   }

   #employee .table .tr .w1000,
   #employee .table .tr .td {
      min-width: auto !important;
      width: 100%;
      font-size: 14px;
   }

   #employee .table .tr .td .product .data .item {
      font-size: 12px;
   }

   #employee {
      margin-top: 20px;
   }

   #employee .table .tr.names {
      padding: 13px 10px;
   }

   #employee .table .tr .td .checkbox {
      background: #e5e5e5;
   }

   #employee .table .tr .td .file {
      display: table;
      position: relative;
      width: 30px;
      height: 30px;
      display: block;
      overflow: hidden;
   }

   #employee .table .tr .td .file input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 2;
   }

   #employee .table .tr .td .file span {
      width: 100%;
      height: 100%;
      position: relative;
      top: 0;
      left: 0;
      font-size: 30px;
      color: #424242;
   }

   #employee .table .tr .td.id span,
   #employee .table .tr .td .product .column .item {
      font-size: 11px;
   }

   #employee .table .tr:not(.names) .td {
      order: 3;
   }

   #employee .table .tr:not(.names) .td.id {
      order: 1;
      width: auto;
   }

   #employee .table .tr:not(.names) .td.sts {
      order: 4;
      width: 100%;
   }

   .modal-dialog {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      border-radius: 0px;
   }

   .modal-dialog .comments {
      height: 65vh;
   }

   .reg-code,
   .reg-success {
      min-height: auto;
      padding: 75px 15px;
   }

   .reg-code .title,
   .reg-success .title,
   .game-login .data .title {
      font-size: 22px;
      margin-top: 0;
      padding-top: 0;
   }

   .reg-code form {
      gap: 15px;
   }

   .reg-code form .inputItem {
      width: 60px;
      height: 60px;
   }

   .reg-code form .inputItem .line {
      width: 40px;
   }

   .reg-success p {
      padding: 0;
      font-size: 16px;
   }

   .game-login {
      flex-wrap: wrap;
   }

   .game-login picture {
      width: 100%;
   }

   .game-login .data {
      width: 100%;
      padding: 20px;
   }

   .game-login .data .subTitle,
   .game-login .data p {
      font-size: 16px;
      margin: 10px 0;
   }

   .game-login .data .buttons {
      flex-wrap: wrap;
      gap: 10px;
   }

   .game-login .data .buttons a.button {
      width: 100%;
      font-size: 16px;
      padding: 10px;
   }

   /* Скрытие элементов ПК в мобильной версии */
   #top,
   header.wrapper,
   #tasksTop,
   nav.wrapper,
   footer {
      display: none;
   }

   #editProfile form {
      gap: 20px;
   }

   #editProfile form .column {
      width: 100% !important;
      gap: 20px;
   }

   #editProfile form .column .avatar {
      width: 150px;
   }

   #editProfile form .column .avatar picture {
      width: 150px;
      height: 150px;
   }

   #editProfile form .column .avatar .button {
      font-size: 12px;
   }

   #editProfile form .column .inputs {
      width: 100%;
      gap: 10px;
   }

   .input .data input {
      font-size: 16px;
   }

   .input {
      height: 50px;
      overflow: hidden;
   }

   .input.active .data .placeholder {
      font-size: 10px;
   }

   #editProfile form .bottomInputs {
      flex-wrap: wrap;
      gap: 10px;
      border-bottom: 1px solid rgba(66, 66, 66, 0.1);
      padding-bottom: 20px;
      justify-content: space-between;
   }

   #editProfile form .bottomInputs .input {
      width: 100%;
      overflow: hidden;
   }

   #editProfile form .bottomInputs .input:last-child {
      width: 100%;
   }

   .input.sex label {
      gap: 0px;
   }

   .input.sex label span {
      font-size: 16px;
   }

   #editProfile form .column .items .item {
      flex-wrap: wrap;
      gap: 10px;
   }

   #editProfile form .column .items .item .input {
      width: 100%;
   }

   #editProfile .column .quantityChildren {
      flex-wrap: wrap;
   }

   #editProfile .column .quantityChildren .input {
      width: 100%;
   }

   #editProfile form .buttonBottom {
      margin-top: 20px;
      width: 100%;
      flex-wrap: wrap;
      gap: 20px;
   }

   #editProfile form .buttonBottom button {
      width: 100%;
      background: var(--red);
      padding: 20px 0;
      color: #fff;
   }

   form ul.nav li a.active {
      color: #fff;
      text-decoration: underline;
   }

   .check span {
      text-align: center;
      color: #fff;
   }

   .check span a {
      text-decoration: underline;
      color: #fff;
   }

   .input .data .placeholder {
      font-size: 16px;
   }

   #editProfile .inputsItems {
      gap: 10px;
   }

   #conteiner .navOther {
      gap: 5px 10px;
   }

   #editProfile .history h1 {
      font-size: 22px;
      text-align: center;
   }

   #editProfile .history p {
      font-size: 12px;
      text-align: center;
      margin: 20px 0;
   }

   #editProfile .history .items {
      flex-wrap: wrap;
      gap: 10px;
   }

   #editProfile .history .items .item {
      width: 85px;
      height: auto;
   }

   #editProfile .history .items .item .title,
   #editProfile .history .items .item .value {
      font-size: 12px;
   }

   #editProfile .history .items .item i {
      font-size: 33px;
   }

   #editProfile .history .items .item.opacity {
      opacity: 1;
      background: rgba(229, 229, 229, 0.9);
   }

   #employee .table .tr .td.list-products-big {
      min-width: auto;
   }

   #employee .table .tr .td .w300 {
      min-width: auto !important;
   }

   #employee .table .tr .td .product {
      flex-wrap: wrap;
      gap: 15px 15px;
   }

   #employee .table .tr .td .product .column {
      min-width: 30px;
      padding: 0;
      /* margin-top: 10px; */
   }

   .productsOther .bottomNav .newProduct {
      min-width: auto;
      width: 100%;
   }

   #game {
      width: 100%;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   #game a.button {
      text-decoration: none;
      border: 1px solid #fff;
      border-radius: 10px;
      width: auto;
      height: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 16px;
      background: var(--red);
      color: #fff;
      font-weight: 600;
      font-size: 18px;
      line-height: 100%;
   }

   .form-success {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 2;
      text-align: center;
      justify-content: center !important;
      border: 0 !important;
   }

   .form-success span {
      display: table !important;
   }

   .form-success i.mso {
      display: block;
      margin: 0 auto 20px;
   }

   .form-success a.close {
      position: fixed;
      top: 15px;
      right: 15px;
      color: var(--black);
      font-size: 30px;
   }

   .reg-code form .inputItem input {
      font-size: 30px;
   }

   #filter {
      margin-bottom: 0px;
      flex-wrap: wrap;
   }

   .reloadPage,
   .backPage {
      right: 10px;
   }

   form ul.nav {
      gap: 20px;
   }

   form ul.nav li a {
      font-size: 14px;
   }

   form button {
      margin-top: 20px;
   }

   .modal-dialog form .buttons button {
      margin-bottom: 0px;
      margin-top: 0px;
   }
}

@media only screen and (max-width: 480px) {

   .lk-modals {
      display: block;
   }

   .toggle-switch {
      align-self: flex-end;
      margin-top: 10px;
   }
}