body {
  margin: 0;
  padding: 0;
  background-color: #F9F9F9;
  font-family: "Rubik", serif;
  font-size: 15px;
  color: #2c3e50;
}

input, textarea, select, button{
  font-family: "Rubik", serif;
}

h2{
  margin: 0 20px 0 20px;
  padding: 0;
  font-size: 30px;
}

.block {
  width: 96%;
  max-width: 1920px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 0 20px 0;
  background-color: #FFFFFF;
  border-top: 10px solid #58B19F;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.menu{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 20px 0 20px;
  font-size: 20px;
  background-color: #F7F7F7;
}

.menu a{
  text-decoration: none;
}

.submenu a{
  text-decoration: none;
}

.menu_row{
  display: flex;
  flex-direction: row;
}

.menus_test{
  padding: 7px 15px;
  margin: 0 10px 0 0;
  border-radius: 0 0 10px 10px;
  color: #fa983a;
  font-weight: 700;
}

.menus {
  padding: 7px 15px;
  background-color: #EEEEEE;
  margin: 0 10px 0 0;
  border-radius: 0 0 10px 10px;
  color: #999999;
  font-weight: 700;
  transition: all 0.2s ease; /* Плавний перехід для всіх властивостей */
}

.menus:hover {
  background-color: #58B19F; /* Зміна кольору фону */
  color: #FFFFFF; /* Зміна кольору тексту */
  transform: scale(1.04); /* Невелике збільшення елемента */
}

.menus_logout {
  padding: 7px 15px;
  background-color: #EEEEEE;
  margin: 0 10px 0 0;
  border-radius: 0 0 10px 10px;
  color: #999999;
  font-weight: 700;
  transition: all 0.2s ease; /* Плавний перехід для всіх властивостей */
}

.menus_logout:hover {
  background-color: #e74c3c; /* Зміна кольору фону */
  color: #FFFFFF; /* Зміна кольору тексту */
  transform: scale(1.04); /* Невелике збільшення елемента */
}


.menus_active{
  padding: 7px 15px;
  background-color: #58B19F;
  margin: 0 10px 0 0;
  border-radius: 0 0 10px 10px;
  color: #FFFFFF;
  font-weight: 700;
}

.submenu{
  display: flex;
  flex-direction: row;
  font-size: 14px;
  padding: 20px 20px 40px 20px;
  border-bottom: 2px solid #CCCCCC;
  background-color: #F7F7F7;
}

.submenus {
  position: relative; /* Для коректного розташування псевдоелемента */
  padding: 3px 7px;
  margin: 0 10px 0 0;
  color: #CCCCCC;
  font-weight: 700;
  text-decoration: none; /* Забираємо стандартне підкреслення */
  transition: color 0.15s ease; /* Плавна зміна кольору тексту */
}

.submenus::after {
  content: ''; /* Створюємо псевдоелемент */
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0; /* Початкова ширина */
  height: 3px; /* Висота підкреслення */
  background-color: #58B19F; /* Колір підкреслення */
  transition: width 0.15s ease; /* Анімація ширини */
}

.submenus:hover {
  color: #2f3640; /* Зміна кольору тексту при наведенні */
}

.submenus:hover::after {
  width: 100%; /* Підкреслення розширюється на всю ширину */
}

.submenus_active{
  padding: 3px 7px;
  margin: 0 10px 0 0;
  color: #2f3640;
  font-weight: 700;
  border-bottom: 3px solid #58B19F;
}

table {
  border-collapse: collapse;
  margin: 0 20px 0 20px;
}

td {
  border: 1px solid #ddd;
  padding: 37px 10px 37px 10px;
  text-align: left;
  font-size: 14px;
  white-space: nowrap;
}

th{
  border: 1px solid #ddd;
  padding: 10px 10px 10px 10px;
  text-align: left;
  font-size: 14px;
  white-space: nowrap;
}

th {
  background-color: #f4f4f4;
}

tr:hover {
  background-color: #f1f1f1;
}

.search{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 40px 20px 0 20px;
  position: relative;
}

.all_count{
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: -11px;
  right: 0;
  color: #999999;
}

.all_sales{
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: -28px;
  right: 0;
  color: #999999;
}

.search_input{
  height: 38px;
  border: 1px solid #DDDDDD;
  padding: 0 10px 0 10px;
  outline: none;
  width: 300px;
  border-radius: 3px;
}

.search_input:focus{
  background-color: #f4f4f4;
}

.filter{
  display: flex;
  flex-direction: column;
  font-size: 12px;
  margin: 0 20px 20px 20px;
}

.pic_filters{
  margin: 0 0 0 20px;
}

.pic_filters:hover{
  opacity: 0.5;
  cursor: pointer;
}

.main-container {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0 20px;
  gap: 20px;
}

.pcd_hint{
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 20px;
  gap: 20px;
}

.main-container-cart {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 20px;
  gap: 20px;
}

.main-container_checkbox {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0 20px;
  gap: 20px;
}

.item{
  width: calc(20% - 20px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.item_textarea{
  width: calc(40% - 20px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.item_table_orders{
  width: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.item_pics{
  width: calc(10% - 20px);
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.item_pics:hover{
  cursor: grab;
}

.item_1 {
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
  display: flex;
  justify-content: space-between;
}

.item_1_pay{
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.item_1_pic{
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
  text-align: left;
}

.item_1_orders{
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
  text-align: left;
}

.item_2 {
  display: flex;
  align-items: center; /* Вирівнює введення по вертикалі */
}

.item_2_wrap{
  display: flex;
  align-items: center;
}

.item_4_upd_btn{
  margin: 20px 0 0 0;
}

.item_3{
  margin: 20px 0 0 0;
}

.row{
  display: flex;
  flex-direction: row;
}

.row_filter{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.input_add{
  background-color: #EEEEEE;
  border-radius: 5px;
  font-size: 15px;
  outline: none;
  border: none;
  height: 38px;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
}

.input_add:focus{
  background-color: #DEDEDE;
  border-color: #999;
}

.textarea_add{
  background-color: #EEEEEE;
  border-radius: 5px;
  font-size: 15px;
  outline: none;
  border: none;
  resize: none;
  padding: 10px 15px;
  width: 100%;
  box-sizing: border-box;
}

.textarea_add:focus{
  background-color: #DEDEDE;
}

.input_add_left{
  background-color: #EEEEEE;
  border-radius: 5px 0 0 5px;
  font-size: 15px;
  outline: none;
  border: none;
  height: 38px;
  padding: 0 15px;
  width: 50%;
  box-sizing: border-box;
}

.input_add_left:focus{
  background-color: #DEDEDE;
}

.input_add_right{
  background-color: #EEEEEE;
  border-radius: 0 5px 5px 0;
  font-size: 15px;
  outline: none;
  border: none;
  height: 38px;
  padding: 0 15px;
  width: 50%;
  box-sizing: border-box;
}

.input_add_right:focus{
  background-color: #DEDEDE;
}

.bsthbvwerst_upd{
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  margin: 0 0 20px 0;
  padding: 40px 0 0 0;
}

.bsthbvwerst{
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #FFFFFF;
  margin: 0 0 20px 0;
  padding: 40px 0 0 0;
}

.item_btn{
  display: flex;
  flex-direction: row;
  padding: 20px 20px 40px 20px;
}

.item_btn_textarea{
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 20px 0 0 20px;
}

.item_btn_pic{
  display: flex;
  flex-direction: column;
  width: calc(20% - 20px);
  margin: 20px 0 0 0;
}

.item_btn_pic_checkbox{
  display: flex;
  flex-direction: column;
}

.item_btn_pic2{
  display: flex;
  flex-direction: column;
  width: calc(20% - 20px);
  margin: 20px 0 0 20px;
}

.item_btn_pics{
  display: none;
  position: relative;
  flex-wrap: wrap;
  margin: 20px 0 0 20px;
  gap: 20px;
}

.item_btn_pics_update{
  display: flex;
  position: relative;
  flex-wrap: wrap;
  margin: 20px;
  gap: 20px;
}

.file-label{
  display: flex;
  height: 38px;
  width: 98%;
  font-size: 15px;
  background-color: #EEEEEE;
  border-radius: 5px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  color: #787878;
  font-weight: 500;
}

.file-label:hover{
  background-color: #DEDEDE;
}

.input_add_btn{
  outline: none;
  border: none;
  height: 38px;
  border-radius: 5px;
  font-weight: 700;
  background-color: #58B19F;
  border-bottom: 3px solid #4B9485;
  padding: 2px 15px 0 15px;
  color: #FFFFFF;
  transition: all 0.15s;
}

.input_add_btn:hover{
  background-color: #4B9485;
  cursor: pointer;
  transition: all 0.15s;
}

.input_del_btn{
  outline: none;
  border: none;
  height: 38px;
  border-radius: 5px;
  font-weight: 700;
  background-color: #ff6b6b;
  border-bottom: 3px solid #ee5253;
  padding: 2px 15px 0 15px;
  color: #FFFFFF;
  transition: background-color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
}

.input_del_btn:hover{
  background-color: #ee5253;
  cursor: pointer;
}

.input_upd_btn{
  outline: none;
  border: none;
  height: 33px;
  border-radius: 5px;
  font-weight: 700;
  background-color: #1289A7;
  border-bottom: 3px solid #006266;
  padding: 2px 15px 0 15px;
  color: #FFFFFF;
  transition: background-color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
}

.input_upd_btn:hover{
  background-color: #006266;
  cursor: pointer;
}

.input_sale_btn{
  display: flex;
  align-items: center;
  font-size: 14px;
  outline: none;
  border: none;
  height: 33px;
  border-radius: 5px;
  font-weight: 700;
  background-color: #58B19F;
  border-bottom: 3px solid #4B9485;
  padding: 2px 15px 0 15px;
  color: #FFFFFF;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.input_sale_btn:hover{
  background-color: #4B9485;
  cursor: pointer;
}

.input_add_btn:disabled{
  outline: none;
  border: none;
  height: 38px;
  border-radius: 5px;
  font-weight: 700;
  background-color: #EEEEEE;
  padding: 0 15px 0 15px;
  color: #999999;
  cursor: not-allowed;
}

.input_add_btn_param{
  outline: none;
  border: none;
  height: 38px;
  border-radius: 5px;
  font-weight: 700;
  background-color: #58B19F;
  border-bottom: 3px solid #4B9485;
  padding: 2px 15px 0 15px;
  color: #FFFFFF;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.input_add_btn_param:hover{
  background-color: #4B9485;
  cursor: pointer;
}

.this_pic{
  aspect-ratio: 1;
  border-radius: 5px;
  object-fit: cover;
}

.delete_btn{
  position: absolute;
  top: -7px;
  right: -7px;
  background-color: #fc5c65;
  color: #FFFFFF;
  border-radius: 42px;
  padding: 3px 8px;
  border: none;
  font-size: 18px;
}

.delete_btn_update{
  display: none;
  position: absolute;
  top: -7px;
  right: -7px;
  background-color: #fc5c65;
  color: #FFFFFF;
  border-radius: 42px;
  padding: 3px 8px;
  border: none;
  font-size: 18px;
}

.item_pics:hover > .delete_btn_update{
  display: inline-block;
  cursor: pointer;
}

.delete_btn:hover{
  background-color: #eb3b5a;
  cursor: pointer;
}

.after_add{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 0 20px;
  color: #787878;
  font-size: 12px;
}

.after_add_video{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 0 20px;
  color: #787878;
  font-size: 12px;
}

.after_add_ttn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 0 20px;
  color: #787878;
  font-size: 12px;
}

.after_upd{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 0 20px;
  color: #787878;
  font-size: 12px;
}

.after_order{
  display: flex;
  flex-direction: column;
  margin: 0 0 0 20px;
  color: #787878;
  font-size: 11px;
}

.status-good{
  color: #58B19F;
  font-weight: 700;
  font-size: 14px;
}

.status-sql{
  color: #8854d0;
  font-weight: 700;
  font-size: 14px;
}

.status-bad{
  color: #eb3b5a;
  font-weight: 700;
  font-size: 14px;
}

.percent{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #787878;
}

.percent_video{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #787878;
}

.pic_abs{
  position: absolute;
  top: 0;
  width: 91px;
  height: 91px;
  object-fit: cover;
}

.checkbox_mon input[type="checkbox"] {
  display: none;
}

.checkbox_mon label {
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 12px;
  background-color: #f4f4f4;
  cursor: pointer;
  transition: all 0.15s;
}

.checkbox_mon input[type="checkbox"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.15s;
}

.filter_radio input[type="radio"] {
  display: none;
}

.filter_radio label {
  display: flex;
  align-items: center;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 12px;
  background-color: #EEEEEE;
  cursor: pointer;
  transition: all 0.15s;
}

.filter_radio input[type="radio"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.15s;
}

.filter_checkbox input[type="checkbox"] {
  display: none;
}

.filter_checkbox label {
  display: flex;
  align-items: center;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 12px;
  background-color: #f4f4f4;
  cursor: pointer;
  transition: all 0.15s;
}

.filter_checkbox input[type="checkbox"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.15s;
}

.filter_checkbox2 input[type="checkbox"] {
  display: none;
}

.filter_checkbox2 label {
  display: flex;
  align-items: center;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 12px;
  background-color: #f4f4f4;
  cursor: pointer;
  transition: all 0.15s;
}

.filter_checkbox2 input[type="checkbox"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.15s;
}

.radio_checkbox input[type="radio"] {
  display: none;
}

.radio_checkbox label {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 15px 0 15px;
  margin: 0 10px 0 0;
  border-radius: 5px;
  font-size: 14px;
  background-color: #EEEEEE;
  cursor: pointer;
  transition: all 0.2s;
}

.radio_checkbox input[type="radio"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox_c input[type="checkbox"] {
  display: none;
}

.checkbox_c label {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 15px 0 15px;
  margin: 0 10px 0 0;
  border-radius: 5px;
  font-size: 14px;
  background-color: #EEEEEE;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox_c input[type="checkbox"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox label {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 15px 0 15px;
  margin: 0 10px 10px 0;
  border-radius: 5px;
  font-size: 14px;
  background-color: #EEEEEE;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox input[type="checkbox"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox_m input[type="checkbox"] {
  display: none;
}

.checkbox_m label {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 5px 0 5px;
  margin: 0 5px 5px 0;
  border-radius: 4px;
  font-size: 11px;
  background-color: #EEEEEE;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox_m input[type="checkbox"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox_rr input[type="radio"] {
  display: none;
}

.checkbox_rr label {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  color: #999999;
  padding: 1px 7px;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  background-color: transparent;
  margin: 0 10px 0 0;
  font-size: 12px;
}

.checkbox_rr:hover label {
  cursor: pointer;
  background-color: #CCCCCC;
}

.checkbox_rr input[type="radio"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  border: 1px solid #58B19F;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox_r input[type="radio"] {
  display: none;
}

.checkbox_r label {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  color: #999999;
  padding: 2px 7px;
  border-radius: 3px;
  background-color: #EEEEEE;
  margin: 0 10px 0 0;
  font-size: 12px;
}

.checkbox_r input[type="radio"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox_r_checkbox input[type="checkbox"] {
  display: none;
}

.checkbox_r_checkbox label {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  color: #999999;
  padding: 2px 7px;
  border-radius: 3px;
  background-color: #EEEEEE;
  margin: 0 10px 0 0;
  font-size: 12px;
}

.checkbox_r_checkbox input[type="checkbox"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.2s;
}

.wrap_flex_5{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 40px 0 0 20px;
  justify-content: flex-start;
}

.wrap_20_parameters{
  display: flex;
  flex-direction: column;
  width: calc(20% - 20px);
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #DEDEDE;
  border-radius: 5px;
}

.tab_del_parameters{
  text-align: center;
  color: #CCCCCC;
}

.tab_del_parameters:hover{
  background-color: #eb3b5a;
  cursor: pointer;
  color: #FFFFFF;
}

.width1per_pics{
  position: relative;
  padding: 0;
  width: 90px;
  box-sizing: border-box;
  overflow: hidden;
}

.width1per{
  width: 1%;
  white-space: nowrap;
}

.pic_each{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 5px;
}

.pic_each_update{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 5px;
  filter: brightness(0.8);
  transition: all 0.2s ease;
}

.pic_each_update:hover{
  filter: brightness(1);
}

.td_background{
  position: relative;
}

.td_background:hover{
  background-color: #58B19F;
  transition: all 0.2s ease;
  color: #FFFFFF;
  cursor: pointer;
}

.form_update{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0 0 20px;
}

.sort{
  text-decoration: none;
  color: #2c3e50;
}

.sort:hover{
  color: #f39c12;
}

.sort_active{
  text-decoration: none;
  color: #f39c12;
}

.preview_images{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px;
}

.no_pic{
  display: flex;
  font-size: 13px;
  flex-direction: column;
  align-items: center;
  color: #999999;
}

.generate_article{
  user-select: none;
}

.generate_article:hover{
  cursor: pointer;
  text-decoration: underline;
  color: #58B19F;
}

.generate_password{
  user-select: none;
}

.generate_password:hover{
  cursor: pointer;
  text-decoration: underline;
  color: #58B19F;
}

.values{
  display: none;
}

.first_dollar_rate{
  font-weight: 700;
  background-color: #4B9485;
  color: #FFFFFF;
}

.table_orders{
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 20px 0 0 0;
}

.for_btn_new_article{
  padding: 7px 15px;
  background-color: #58B19F;
  margin: 0 10px 0 0;
  border-radius: 4px;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
}

.crm_filter{
  margin: 20px 0 0 0;
}

.add_to_cart{
  transition: all 0.15s;
}

.add_to_cart:hover{
  background-color: #58B19F;
  transition: all 0.15s;
  cursor: pointer;
  color: #FFFFFF;
}

.add_to_cart_active{
  color: #FFFFFF;
  transition: all 0.15s;
  background-color: #58B19F;
}

.add_to_cart_active:hover{
  color: #FFFFFF;
  transition: all 0.15s;
  background-color: #c0392b;
  cursor: pointer;
}

.all_cart{
  display: flex;
}

.quantity-input{
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent;
  text-align: center;
  font-size: 18px;
}

.delete-row-btn{
  text-align: center;
  transition: all 0.15s;
}

.delete-row-btn:hover{
  background-color: #ee5253;
  cursor: pointer;
  transition: all 0.15s;
  color: #FFFFFF;
}

.total_sum{
  position: absolute;
  bottom: 0;
}

.enter_id_link{
  text-decoration: none;
  color: #2c3e50;
  transition: all 0.15s;
}

.enter_id_link:hover{
  text-decoration: underline;
  color: #f368e0;
  transition: all 0.15s;
}

.link_change_password{
  text-decoration: none;
  color: #2c3e50;
  transition: all 0.15s;
}

.link_change_password:hover{
  text-decoration: underline;
  color: #f368e0;
  transition: all 0.15s;
}

.order_id_link{
  text-decoration: none;
  color: #2c3e50;
  transition: all 0.15s;

  font-family: "IBM Plex Sans Arabic", serif;
  font-weight: 500;
}

.order_id_link:hover{
  text-decoration: underline;
  color: #f368e0;
  transition: all 0.15s;
}

.order_id_link_2{
  text-decoration: none;
  color: #2c3e50;
  transition: all 0.15s;
}

.order_id_link_2:hover{
  text-decoration: underline;
  color: #f368e0;
  transition: all 0.15s;
}

.numeric_font{
  font-family: "IBM Plex Sans Arabic", serif;
  font-weight: 500;
}

.count_in_db{
  display: flex;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
}

.jus{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.edit_time{
  color: #CCCCCC;
}

.relative{
  position: relative;

}

.checkbox_gift input[type="checkbox"] {
  display: none;
}

.checkbox_gift label {
  position: absolute;
  bottom: -3px;
  padding: 2px 10px 2px 10px;
  color: #CCCCCC;
  outline: none;
  transition: all 0.15s;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
}

.checkbox_gift:hover label {
  transition: all 0.15s;
  color: #999999;
  cursor: pointer;
}

.checkbox_gift input[type="checkbox"]:checked+label {
  background-color: #58B19F;
  color: #FFFFFF;
  transition: all 0.15s;
}

.add_from_article{
  display: flex;
  align-items: center;
  padding: 0 15px 0 15px;
  font-size: 20px;
  background-color: #EEEEEE;
  margin: 0 0 0 20px;
  border-radius: 3px;
  color: #999999;
  font-weight: 700;
  transition: all 0.2s ease;
  text-decoration: none;
  opacity: 0.3;
}

.add_from_article:hover{
  background-color: #58B19F;
  color: #FFFFFF;
  transform: scale(1.04);
  opacity: 1;
}

.actions{
  display: flex;
  flex-direction: column;
  margin: 20px 20px 20px 0;
}

.actions_flexx{
  display: flex;
  flex-direction: row;
}

.actions_input{
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid #DDD;
  outline: none;
  background-color: #F7F7F7;
}

.opt_1_input{
  height: 38px;
  background-color: #F4F4F4;
  border: 1px solid #DDDDDD;
  padding: 0 20px 0 20px;
  border-radius: 4px;
  transition: all 0.3s;
  outline: none;
  box-sizing: border-box;
  margin: 20px 0 0 0;
}

.opt_1_input:focus{
  background-color: #E9E9E9;
  transition: all 0.3s;
}

.search_terms_textarea{
  padding: 10px;
  margin: 20px 0 0 0;
  border-radius: 5px;
  border: 2px solid #DEDEDE;
  outline: none;
  resize: none;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  height: 200px;
}

.actions_button{
  outline: none;
  border: none;
  height: 38px;
  border-radius: 5px;
  font-weight: 700;
  background-color: #58B19F;
  border-bottom: 3px solid #4B9485;
  padding: 2px 20px 0 20px;
  color: #FFFFFF;
  transition: all 0.15s;
  margin: 0 0 0 20px;
  font-size: 14px;
}

.actions_button:hover{
  background-color: #4B9485;
  cursor: pointer;
  transition: all 0.15s;
}

.actions_button:disabled {
  background-color: #CCC;
  border-bottom: 3px solid #A1A1A1;
  cursor: not-allowed;
}

.actions_result{
  display: flex;
  align-items: center;
  margin: -1px 0 0 20px;
}

#sum-cell{
  padding: 20px 0;
  text-align: center;
  border: none;
  background-color: transparent;
  outline: none;
}

.action_sale{
  position: absolute;
  white-space: nowrap;
  bottom: -11px;
  right: 20px;
  color: #999999;
  font-size: 13px;
}

.fio_order{
  color: #CCCCCC;
}

.input_wholesale{
  width: 100%;
  box-sizing: border-box;
  border: none;
  background-color: #4b6584;
  color: #FFF;
  padding: 1px 10px;
  outline: none;
  border-radius: 3px;
}

.input_wholesale:focus{
  background-color: #2d98da;
}

.inputt{
  display: flex;
  flex-direction: row;
}

.inputt_1{
  display: flex;
  flex-direction: column;
  flex: 0.3;
}

.inputt_2{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.inputt_3{
  display: flex;
  flex-direction: column;
  align-items: end;
  flex: 0.3;
}

.term_inputs{
  margin: 0 0 10px 0;
}

.index_main_block{
  width: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  min-height: 100vh;
}

.inputs{
  display: flex;
  flex-direction: column;
}

.rowww{
  display: flex;
  flex-direction: row;
}

.inputs_1{
  display: flex;
  flex: 1;
}

.main_inputs_left{
  width: 100%;
  border: none;
  border-top: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
  border-left: 1px solid #DEDEDE;
  border-radius: 8px 0 0 8px;
  font-size: 30px;
  outline: none;
  padding: 15px;
  text-align: center;

  font-family: "Rubik", serif;
}

.main_inputs_right{
  width: 100%;
  border: none;
  border-top: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
  border-right: 1px solid #DEDEDE;
  border-radius: 0 8px 8px 0;
  border-left: 1px solid #DEDEDE;
  font-size: 30px;
  outline: none;
  padding: 15px;
  text-align: center;

  font-family: "Rubik", serif;
}

.main_titles{
  display: flex;
  justify-content: center;
  margin: -140px 0 20px 0;
  font-size: 30px;
  font-weight: 400;
  color: #DEDEDE;
}

.btn_inputs_main{
  width: 100%;
  border: none;
  border-radius: 8px;
  font-size: 30px;
  outline: none;
  padding: 15px;
  margin: 20px 0 0 0;
  transition: all 0.2s;
  font-size: 30px;

  font-family: "Rubik", serif;
}

.btn_inputs_main:hover{
  cursor: pointer;
  background-color: #58B19F;
  color: #FFFFFF;
  font-weight: 600;
  transition: all 0.2s;
}

.radio_2{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.ttn_checkbox input[type="checkbox"] {
  display: none;
}

.ttn_checkbox label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  background-color: #f4f4f4;
  cursor: pointer;
  transition: all 0.15s;
}

.ttn_checkbox input[type="checkbox"]:checked+label {
  color: #FFFFFF;
  background-color: #58B19F;
  cursor: pointer;
  transition: all 0.15s;
}

.remove_from_order {
  visibility: hidden;
  color: #ff4757;
  margin: 0 0 0 10px;
}

.red_column{
  background-color: #ffe8e2;
}

.red_column:hover{
  background-color: #ffc2b2;
}

.green_column{
  background-color: #91dfb2;
}

.green_column:hover{
  background-color: #81c89f;
}

.title_cart{
  position: relative;
}

.title_cart_ablosute_bottom{
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 14px;
}

.radoiss{
  display: flex;
}

.answer_wholsale_current_order{
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 0 15px;
}

.last_wholesale_time{
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: #999999;
}

.for_sale_display_flex{
  display: flex;
  flex-direction: row;
  gap: 20px;
}



.bill_up_3{
    display: flex;
    flex-direction: column;
  }

  .name_waybill{
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
  }

  .bill_up_up{
    display: flex;
    flex-direction: row;
    border-bottom: 3px solid #000000;
    padding: 5px 0 5px 0;
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 0 0;
  }

  .bill_up_up2{
    align-items: center;
    display: flex;
  }

  .bill_up{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px 0 5px 0;
    font-size: 18px;
    font-weight: 600;
    margin: 25px 0 0 0;
  }

  .infos_1{
    display: flex;
    flex-direction: row;
    margin: 20px 0 0 0;
  }

  .infos_1_1{
    display: flex;
    width: 130px;
  }

  .infos_1_2{
    display: flex;
    flex: 1;
  }

  .infos_1_2::first-line {
    font-weight: 600;
  }

.clickable{
  font-size: 12px;
  background-color: #84817a;
  padding: 3px 5px;
  border-radius: 3px;
  color: #FFF;
  margin: 0 10px 0 10px;
  transition: background-color 0.2s ease;
}

.clickable:hover{
  background-color: #aaa69d;
  cursor: pointer;
}

.btn_show_all_positions{
  outline: none;
  border: none;
  background-color: transparent;
  font-size: 10px;
  margin: 0;
  padding: 2px 0 2px 0;
  color: #888888;
  transition: all 0.15s;
  border-radius: 3px;
}

.btn_show_all_positions:hover{
  background-color: #58B19F;
  cursor: pointer;
  color: #FFFFFF;
  transition: all 0.15s;
  padding: 2px 5px 2px 5px;
}


@media print {
  body{
    font-family: "Rubik", serif;
    margin: 0;
    padding: 0;
    color: #000000;
  }

  .block{
    border: none;
    box-shadow: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .menu{
    display: none;
  }

  .submenu{
    display: none;
  }

  table {
    border: 1px solid #000000;
    border-collapse: collapse;
    margin: 0 20px 0 20px;
  }

  td {
    border: 1px solid #000000;
    padding: 37px 10px 37px 10px;
    text-align: left;
    font-size: 16px;
    white-space: nowrap;
  }

  th{
    border: 1px solid #000000;
    padding: 10px 10px 10px 10px;
    text-align: left;
    font-size: 16px;
    white-space: nowrap;
  }

  tr:hover {
    background-color: #f1f1f1;
    padding: 10px 10px 10px 10px;
  }

  .bill_up_up{
    display: none;
  }

  .bill_up_up_2{
    align-items: center;
    display: none;
  }

  .name_waybill{
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
  }

  .bill_up_3{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bill_down{
    display: flex;
    flex-direction: column;
    margin: 20px 0 0 0;
  }

  .bill_down_d{
    display: flex;
    flex-direction: row;
    margin: 20px 0 0 0;
  }

  .flex_1{
    display: flex;
    flex: 1;
  }

  .down_line{
    width: 300px;
    margin: 0 0 0 10px;
    border-bottom: 1px solid #000000;
  }

  .all_sums{
    display: flex;
    flex-direction: column;
    font-weight: 600;
  }

  .flex_row{
    display: flex;
    flex-direction: row;
  }

  .flex_row_1{
    display: flex;
    flex-grow: 1;
    justify-content: end;
    padding: 10px 10px 0 0;
    box-sizing: border-box;
  }

  .flex_row_2{
    display: flex;
    min-width: 100px;
    justify-content: end;
    padding: 10px 10px 0 0;
    box-sizing: border-box;
  }
}

.input_date{
  border-radius: 3px;
  font-size: 12px;
  background-color: #f4f4f4;
  transition: all 0.15s;
  width: 100px;
  outline: none;
  border: none;
  padding: 3px 5px;
}

.input_date_actions{
  border-radius: 3px;
  font-size: 12px;
  background-color: #f4f4f4;
  transition: all 0.15s;
  width: 100px;
  outline: none;
  border: none;
  padding: 3px 5px;
  margin: 20px 0 0 0;
}

.green_count{
  color: #81c89f;
  font-weight: 700;
}

.red_count{
  color: #e84118;
  font-weight: 700;
}

.point_count{
  margin: 0 3px 0 3px;
}

.tables_all{
  width: calc(60% - 20px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.price_wholesale_1{
  position: relative;
}

.price_wholesale_2{
  position: relative;
}

.update_prom{
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  color: #8854d0;
  opacity: 0.6;
}

.what_percent_0{
  position: absolute;
  font-size: 11px;
  font-weight: 400;
  color: #999;
}

.what_percent_1{
  display: none;
  position: absolute;
  font-size: 11px;
  font-weight: 400;
  color: #999;
}

.what_percent_2{
  display: none;
  position: absolute;
  font-size: 11px;
  font-weight: 400;
  color: #999;
}

td.price_wholesale_1:hover .what_percent_1 {
  display: block;
}

td.price_wholesale_2:hover .what_percent_2 {
  display: block;
}

.countz{
  color: #58B19F;
  margin: 0 0 0 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.current_cart{
  display: flex;
  flex-direction: column;
  margin: 0 20px 0 20px;
  width: 50%;
}

.item_cart{
  display: flex;
  flex-direction: column;
  font-size: 12px;
  border-radius: 4px;
  background-color: #F9F9F9;
  margin: 20px 0 0 0;

  border: 1px dashed #CCC;
}

.dfhfghf{
  position: relative;
  display: flex;
  height: 100px;
}

.dfhfghf:hover{
  background-color: #F1F1F1;
  transition: all 0.1s;
}

.del_from_cart{
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  border-radius: 34%;
  background-color: #ff6b6b;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
}

.item_cart_block_2{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  margin: 10px 10px 10px 0;
  box-sizing: border-box;
}

.item_cart_block_2_title{
  font-size: 17px;
  font-weight: 600;
}

.item_cart_block_2_slogan{
  font-size: 14px;
  color: #84817a;
  margin: 5px 0 0 0;
}

.item_cart_block_row{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  color: #84817a;
}

.item_cart_block_3{
  display: flex;
  flex-direction: column;
  width: 50px;
  border-left: 1px dashed #DDDDDD;
}

.item_cart_count{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 18px;
}

.count_plus:hover{
  background-color: #58B19F;
  font-weight: 800;
  transition: all 0.3s;
  color: #FFFFFF;
  cursor: pointer;
  user-select: none;
}

.count_cart{
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}

.count_minus:hover{
  background-color: #ff6b6b;
  font-weight: 800;
  transition: all 0.3s;
  color: #FFFFFF;
  cursor: pointer;
  user-select: none;
}

.item_cart_inputs{
  position: relative;
  display: flex;
  justify-content: end;
  border-radius: 0 0 4px 4px;
  padding: 10px;
  background-color: #FFFFFF;
  border-top: 1px solid #DDD;
}

.item_cart_input{
  
}

.cart_this_input{
  width: 100%;
  outline: none;
  border: none;
  padding: 5px 0 5px 0;
  font-size: 18px;
  font-weight: 700;
  background-color: transparent;
}

.cart_this_input_for_sale{
  width: 100%;
  outline: none;
  border: none;
  padding: 5px 0 5px 0;
  font-size: 18px;
  font-weight: 700;
  background-color: transparent;
}

.item_cart_pic_object{
  height: 100px;
  aspect-ratio: 1;
  padding: 10px;
  box-sizing: border-box;
}

.item_cart_pic{
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

.input_add_new{
  width: 100%;
  height: 38px;
  background-color: #F4F4F4;
  border: 1px solid #DDDDDD;
  padding: 0 10px 0 10px;
  border-radius: 4px;
  transition: all 0.1s;
  outline: none;
  box-sizing: border-box;
}

.input_add_new:focus{
  background-color: #E2E2E2;
  transition: all 0.1s;
}

.input_add_new_select{
  width: 100%;
  height: 38px;
  background-color: #F4F4F4;
  border: 1px solid #DDDDDD;
  padding: 0 10px 0 10px;
  border-radius: 4px;
  transition: all 0.1s;
  outline: none;
  box-sizing: border-box;

  appearance: none; /* Вимикає стандартний вигляд */
  -webkit-appearance: none; /* Для Safari */
  -moz-appearance: none; /* Для Firefox */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 20 20"><polygon points="0,0 10,10 20,0" fill="%23333" /></svg>');
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.input_add_new_select:focus{
  background-color: #E2E2E2;
  transition: all 0.1s;
}

.item_2_new{
  display: flex;
  border-bottom: 1px dashed #CCC;
  border-left: 1px dashed #CCC;
  border-right: 1px dashed #CCC;
  border-radius: 0 0 4px 4px;
  padding: 10px;
}

.actions_flex{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 20px 60px 20px;
}

.pagination{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.pagination_button{
  padding: 7px 15px;
  background-color: #EEEEEE;
  margin: 0 10px 0 0;
  border-radius: 0 0 10px 10px;
  color: #999999;
  font-weight: 700;
  font-size: 20px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.pagination_button:hover{
  background-color: #58B19F;
  color: #FFFFFF;
  transform: scale(1.04);
}

.span_pagination{
  padding: 0 15px;
}

.pic_save_ttn{
  height: 28px;
  opacity: 0.4;
  transition: all 0.3s;
  display: none;
}

.pic_save_ttn:hover{
  opacity: 1;
  transition: all 0.3s;
  cursor: pointer;
}

.min_count_sale{
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  color: #FC427B;
  bottom: 11px;
  left: 10px;
  opacity: 0.6;
}

.file input[type="file"] {
  display: none;
}

.file label {
  display: flex;
  height: 30px;
  align-items: center;
  padding: 0 10px 0 10px;
  font-weight: 400;
  color: #84817a;
  border: 1px solid #DEDEDE;
  margin: 0 5px 0 0;
  border-radius: 3px;
  font-size: 13px;
  transition: border 0.2s ease-in-out, ease-in-out 0.1s;
}

.scroll-wrapper {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.scroll-item {
  width: 200px;
  aspect-ratio: 9/16;
  flex-shrink: 0;
  background-color: #F2F2F2;
  border-radius: 5px;
  overflow: hidden;
  padding: 10px 10px 58px 10px;
  transition: all 0.2s;

  display: flex;
  flex-direction: column;
}

.scroll-item:hover {
  background-color: #DEDEDE;
  transition: all 0.2s;
}

.show_select_video_file{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  color: #333333;
}

.show_select_video_file_2{
  color: #4B9485;
  font-weight: 600;
}

.del_video_button{
  width: 100%;
  height: 38px;
  color: #787878;
  background-color: #EEEEEE;
  outline: none;
  border: 1px solid #DDD;
  border-radius: 5px;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 500;
}

.del_video_button:hover{
  border: 1px solid #e74c3c;
  background-color: #e74c3c;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #FFFFFF;
}

.check_xlsx_file:hover{
  background-color: #1e90ff;
  cursor: pointer;
  color: #FFFFFF;
}

.import_xlsx_file:hover{
  background-color: #58B19F;
  cursor: pointer;
  color: #FFFFFF;
}

.del_xlsx_file:hover{
  background-color: #e74c3c;
  cursor: pointer;
  color: #FFFFFF;
}

.stat_sales{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 20px;
}

.loader {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  animation: rotate 0.7s linear infinite;
}

.loader::before,
.loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #CCC;
  animation: prixClipFix 2s linear infinite;
}

.loader::after {
  transform: rotate3d(90, 90, 0, 180deg);
  border-color: #58B19F;
}

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

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  75%,
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
}

.actions_second{
  display: contents;
}

.before_table_cash_desk{
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 40px 0 0 0;
}