#loading {
  display: none;
  position: fixed;
  background: rgb(0 0 0 / 80%);
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5000px rgb(0 0 0 / 80%);
  z-index: 999;
}

#loading-text {
  display: none;
}

#loading-content {
  background: var(--color1);
  width: 80px;
  height: 80px;
  animation: loading 2s infinite ease-in-out;
}

@keyframes loading {
  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }

  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(-180deg);
  }

  75% {
    transform: perspective(100px) rotateX(0) rotateY(-180deg);
  }

  100% {
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}

/* CELENA ANSWER */
#main_answer_server {
  position: fixed;
  width: 250px;
  left: 10px;
  bottom: 10px;
  z-index: 999;
}

#main_answer_server .server_say {
  position: relative;
  background: #094b79;
  box-shadow: 3px 5px 8px rgb(0 55 76 / 31%);
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  animation: slideUp 0.3s cubic-bezier(0, 0, 0.07, 1.42);
  margin-top: 10px;
}

#main_answer_server .success,
#main_answer_server .true,
#main_answer_server .ok {
  background: #62c324;
}

#main_answer_server .danger {
  background: #ea7337;
}

#main_answer_server .error,
#main_answer_server .wrang,
#main_answer_server .false {
  background: #d01717;
}

@keyframes slideUp {
  0% {
    left: -100%;
  }

  100% {
    left: 0;
  }
}

/* CELENA CONTENT */
.celena_grid #celena_content {
  display: grid;
  grid-gap: 20px 20px;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 860px) {
  .celena_grid #celena_content {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* CELENA 404 */
.celena-error {
  align-items: center;
}

/* CELENA NAVIGATION */
.navigation {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.navigation li a {
  display: inline-block;
  background: var(--bg2);
  border-radius: 10px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.navigation li a:hover {
  background: var(--color2);
  color: #fff;
}

.navigation li + li {
  margin-left: 10px;
}

.navigation a.active,
.navigation .pagination_edge a {
  background: var(--color1);
  color: #fff;
}

.navigation .pagination_edge a:before {
  content: "\f015";
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
}

/* CELENA CRUMBS */
#crumbs {
  display: inline-block;
  background: var(--bg2);
  color: var(--color1);
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 20px;
  grid-column: 1/-1;
}

#crumbs a {
  display: inline-block;
  background: var(--bg);
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
}

#crumbs a:hover {
  color: var(--color1);
}

#crumbs span {
  padding: 10px;
}

/* CELENA FAST SEARCH */
.search_result {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  border-radius: var(--radius);
  margin-top: 10px;
}

@media (max-width: 860px) {
  .search_result {
    position: fixed;
    top: 60px;
  }
}

.search_result li + li {
  padding-top: 10px;
  border-top: 1px solid var(--bg2);
  margin-top: 10px;
}

/* CELENA FORM */
.celena-form_flex {
  display: flex;
  align-items: center;
}

.celena-form_flexno select,
.celena-form_flexno textarea,
.celena-form_flexno + div,
.celena-form_flexno input,
.celena-form_flex + div {
  margin-top: 20px;
}

.celena-form_flex > label {
  font-size: 16px;
  font-weight: 500;
  flex: 0 0 auto;
  width: 25%;
}

/* CELENA USER */
.celena-user {
  background: var(--bg2);
  border-radius: 20px;
}

.celena-user > img:first-child {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.celena-user_content {
  align-items: center;
  justify-content: space-between;
  padding: 20px 90px;
}

@media (max-width: 820px) {
  .celena-user_content {
    padding: 30px;
    justify-content: center;
  }
}

.celena-user_profile {
  margin-top: -60px;
  text-align: center;
}

.celena-user_profile > img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  margin-bottom: 10px;
}

@media (max-width: 820px) {
  .celena-user_profile > img {
    width: 100px;
    height: 100px;
  }
}

.celena-user_profile h3 {
  margin-bottom: 0;
}

.celena-user_profile span {
  font-size: 14px;
}

.celena-user_detal {
}

@media (max-width: 820px) {
  .celena-user_detal {
    margin: 30px 0;
  }
}

.celena-user_detal span {
  display: block;
  padding: 5px 0;
}

.celena-user_edit:target {
  display: block;
  background: var(--bg2);
  padding: 30px;
  border-radius: 20px;
  margin-top: 30px;
}

.celena-user_edit input:not([type="submit"]) {
  background: var(--bg);
}

.celena-user_edit .upload_files {
  display: block;
  margin: 20px 0;
}

/* CELENA COMM */
.celena-comm {
  position: relative;
  margin: 20px 0;
}

.celena-comm > img:first-child {
  float: left;
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 10px;
}

.celena-comm_user span {
  font-weight: bold;
}

.celena-comm_content span:nth-child(2) {
  display: block;
  font-size: 12px;
  font-weight: 300;
  margin-top: 3px;
}

.celena-comm > p {
  position: relative;
  display: block;
  background: var(--bg2);
  padding: 10px 20px;
  margin-top: 20px;
}

.celena-comm > p:before {
  content: "";
  position: absolute;
  background: var(--bg2);
  top: -5px;
  left: 1%;
  width: 26px;
  height: 26px;
  transform: rotate(45deg);
  z-index: -1;
}

/* CELENA SHOP */
.counter_goods {
  display: flex;
  align-items: center;
}

.counter_goods a {
  display: inline-block;
  background: #d2dde3;
  border: 1px #d2dde3 solid;
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
  text-align: center;
  font-size: 20px;
}

.counter_goods input {
  border: 1px #d2dde3 solid;
  width: 45px;
  padding: 12px 0;
  margin: 0 10px;
  text-align: center;
}

.add_cart,
.ks_buy {
  position: relative;
  display: inline-block;
  background: var(--color3);
  color: var(--text1);
  padding: 15px 30px;
  border-radius: var(--radius);
  text-align: center;
}

.add_cart {
  background: var(--color1);
  flex: 1 1 0;
  margin-right: 20px;
}

.add_cart:hover,
.ks_buy:hover {
  opacity: 0.9;
}

.added_goods {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  background: #10c44c;
  border-radius: 2px;
  color: #fff;
  width: 41px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  z-index: 5;
}

#cart {
  position: relative;
  display: inline-block !important;
  background: var(--color1);
  border-radius: var(--radius);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  margin-right: 10px;
}

#cart:hover {
  background: var(--color2);
}

#cart:before {
  content: "\f290";
  position: relative;
  font-size: 20px;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
}

.count_in_cart {
  position: absolute;
  background: #f43;
  border-radius: 50%;
  color: #fff;
  top: -3px;
  left: -3px;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 12px;
}

/* CELENA SHOP MODAL */
#cart_modal {
  display: none;
  position: fixed;
  width: 800px;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 0 0 5000px rgb(0 0 0 / 50%);
  border-radius: 15px;
  z-index: 9;
  overflow: hidden;
}

@media (max-width: 860px) {
  #cart_modal {
    width: 100%;
    border-radius: 0;
  }
}

.modal_header {
  background: #42535e;
  color: var(--text1);
  padding: 20px 30px;
  margin-bottom: 0;
  font-size: 20px;
}

#cart_ordering {
  background: var(--bg);
  border-radius: 15px;
  overflow: hidden;
}

#cart_ordering table + div {
  padding: 20px;
}

#cart_ordering table + div > div {
  display: none;
}

#cart_modal table tr,
#cart_ordering table tr {
  display: grid;
  grid-template-columns: 60px 2fr repeat(2, 1fr) 60px;
  grid-gap: 20px 20px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px #d4d4d4 dashed;
}

@media (max-width: 860px) {
  #cart_modal table tr,
  #cart_ordering table tr {
    grid-template-columns: repeat(2, 1fr);
  }
}

#cart_modal .cart_img,
#cart_modal .cart_img img,
.cart_static .cart_img img,
.cart_img img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
  overflow: hidden;
}

#cart_modal .cart_title a,
.cart_price {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.cart_source_price {
  background: #e6eef3;
  color: #677a84;
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
}

#cart_modal .counter_goods a,
#cart_ordering .counter_goods a {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 16px;
}

#cart_modal .counter_goods input,
#cart_ordering .counter_goods input {
  width: 60px;
  height: 31px;
  border-radius: 5px;
}

.remove_goods {
  color: #f45747;
  font-size: 14px;
  font-weight: 600;
}

#cart_modal table + div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

@media (max-width: 860px) {
  #cart_modal table + div {
    display: block;
  }

  #cart_modal table + div > div {
    margin-bottom: 20px;
  }
}

.btn_order,
.btn_clear {
  display: inline-block;
  background: var(--color3);
  color: var(--text1);
  padding: 15px 30px;
  border-radius: var(--radius);
  text-align: center;
}

.btn_order {
  background: var(--color1);
  margin-right: 10px;
}

.cart_total {
  font-size: 18px;
}

.cart_total b,
.celenapay-total b {
  color: #10c44c;
  font-size: 20px;
}

#cart_modal .close:before {
  content: "\f00d";
  position: absolute;
  background: var(--bg);
  border-radius: var(--radius);
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-family: "Font Awesome 6 Pro";
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}

/* CELENA SHOP FORM */
.celenashop-cart {
  justify-content: space-between;
  align-items: flex-start;
}

.celenashop-cart #cart_ordering[style="display: none;"] + form,
.celenashop-cart_not {
  display: none;
}

.celenashop-cart #cart_ordering[style="display: none;"] ~ .celenashop-cart_not {
  display: block;
}

.celenashop-cart > form {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--bg2);
  border-radius: 15px;
  padding: 30px;
  width: 400px;
  margin-left: 40px;
}

@media (max-width: 860px) {
  .celenashop-cart form {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }
}

.celenashop-cart form input ~ input,
.celenashop-cart form input ~ textarea {
  margin-top: 20px;
}

.celenashop-cart form p {
  display: inline-block;
  font-size: 20px;
}

.celenashop-promo > form {
  display: flex;
  align-items: center;
  max-width: 420px;
}

.celenashop-promo > form a {
  margin-left: 20px;
}

.discount_result {
  font-size: 18px;
  font-weight: bold;
}

.discount_result b {
  color: #10c44c;
}

.discount_helper {
  font-size: 14px;
  font-weight: bold;
  opacity: 0.8;
}

/* CELENA SHOP PAYMENT */
.celenapay-title a {
  display: inline-block;
  color: var(--color1);
  font-weight: 600;
  margin-bottom: 10px;
}

.celenapay-payments {
  border: 2px solid var(--bg2);
  padding: 20px;
  border-radius: var(--radius);
  margin-bottom: 30px;
}

.celenapay-payments form input {
  display: inline-block;
  border: 1px solid var(--dark);
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: 0.3s;
}

.celenapay-payments form input:hover {
  border: 1px solid var(--color1);
}

.celenapay-info ul li + li {
  margin-top: 10px;
}

.celenapay-right {
  display: inline-block;
  background: var(--color1);
  color: var(--text1);
  border-radius: var(--radius);
  padding: 30px;
  width: 400px;
  margin-left: 40px;
}

@media (max-width: 860px) {
  .celenapay-right {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
    order: -1;
  }
}

.celenapay-right div + div {
  border-top: 1px solid var(--light);
  padding-top: 20px;
  margin-top: 20px;
}

.celenapay-status .badge {
  width: 100%;
  padding: 18px 30px;
  border-radius: 10px;
  font-weight: bold;
}

.celenapay-status span:not(.badge) {
  display: inline-block;
  opacity: 0.8;
  font-size: 14px;
  margin-top: 20px;
}

.celenapay-cart table {
  width: 100%;
  text-align: left;
}

.celenapay-cart tbody tr th,
.celenapay-cart tbody tr td {
  background: var(--color3);
  color: var(--text1);
  padding: 10px;
}

.celenapay-cart tbody tr:nth-of-type(even) td {
  background-color: #f3f3f3;
  color: var(--text);
}

.celenapay-right .celenapay-total {
  align-items: center;
  background: var(--bg);
  color: var(--text);
  padding: 20px 30px;
  border-radius: var(--radius);
  font-weight: bold;
  text-transform: uppercase;
}

.celenapay-promo {
  color: #ccdeff;
}

.celenapay-promo > span {
  display: block;
  background: var(--light);
  color: var(--text1);
  padding: 8px 10px;
  border-radius: var(--radius);
  margin-top: 10px;
}

.celenapay-promo > span span {
  display: inline-block;
  float: right;
  background: #f43;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 14px;
}

.celenapay-promo span i {
  margin-right: 10px;
  opacity: 0.6;
}