body {
  font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif";
  font-weight: 200;
  font-size: 15px;
  line-height: 1.7;
  color: #c4c3ca;
  background-color: #d4dce5;
  overflow-x: hidden;
}

.bottles_filled {
  background-color: rgb(167 243 208) !important;
}

.sum_filled {
  background-color: rgb(254 226 226) !important;
}

.plan_filled {  
  color: #c82424 !important;
}

.agreed_filled {
  color: #157604 !important;
}

.diff_filled {
  color: #320436 !important;
}

.rep_calculations{
  background-color: #f6f6cc !important;
}

.emp_field{
  font-size: 9px !important;
  color: #737272 !important;
  background-color:  #F2F2F2 !important;  
}

.sup_field{
  font-size: 12px !important;
  color: #090909 !important;
  font-weight: bold !important;
  
}

.buyer_field {
  font-size: 13px !important;
  color: #548235 !important;
  font-weight: bold !important;
}

.dm_field {
  font-size: 14px !important;
  color: #305496 !important;
  font-weight: bold !important;
}

.total_field {
  font-size: 14px !important;
  color: #7024c8 !important;
  font-weight: bold !important;
}

.plan_diff_field {
  font-size: 12px !important;
  color: #c82424 !important;
  font-weight: bold !important;
  font-style: italic !important;
}

.tabulator .tabulator-header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #227f06;
  background-color: #e5ebdd;
  color: #424343;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

.tabulator .tabulator-footer {
  color: #0000FF;
  font-weight: 900;
  font-size: 15px;
  white-space: nowrap;
  -webkit-user-select: none;
  }

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input[type="search"] {
  padding: 1px !important;
  border-radius: 5px;
  border: 0.3px solid #ddd;
  font-family: "Arial Narrow", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.tabulator .tabulator-tree-level-0 .tabulator-cell {
  background-color: #FFF2CC !important;
  font-size: 15px;
  font-weight: bold;  
}

.tabulator .tabulator-tree-level-1 .tabulator-cell {
  background-color: #DDEBF7 !important;
  font-size: 14px;
  font-weight: bold;
}

.tabulator .tabulator-tree-level-2 .tabulator-cell {  
  background-color:  white !important;  
  font-size: 13px;
}

.tabulator .tabulator-tree-level-3 .tabulator-cell {  
  background-color:  #F2F2F2 !important;  
  font-size: 12px;
}

.tabulator .tabulator-tree-level-4 .tabulator-cell {  
  font-size: 12px;
  color:#0000FF
}

.tabulator .tabulator-tree-level-5 .tabulator-cell {  
  font-size: 11px;
  color:#0c390a
}

.tabulator .tabulator-header .tabulator-col {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid #ddd;
  background: #e5ebdd;
  text-align: left;
  vertical-align: bottom;
  overflow: hidden;
}


.plan-1ss {
  display: flex;
  width: 100%;
  height: 85vh;
}

/* Левая колонка (20%) */
#plan-1ss-summary {
  flex: 0 0 25%; /* Не растягивается, фиксированная ширина 20% */
}

/* Правая колонка (80%) */
#plan-1ss-detail {
  flex: 1; /* Заполняет оставшееся пространство (80%) */
  margin-left: 10px;
}

#users-table,
#rights-table,
#submenu-table,
#localization-table,
#scheduler-table,
#struct-table,
#access-table,
#restrictions-table,
#botusers-table,
#orderlist-table,
#orderdet-table,
#buyers-table,
#planbuyers-table,
#routes-table,
#chains-table,
#emp-table,
#outlets-table,
#tboutlets-table,
#google-table,
#google-export-table,
#products-table,
#storecheck-table,
#plan-table,
#distr-table,
#plan-1ss-summary,
#plan-1ss-detail {
  background-color: #ccc;
  border: 1px solid #333;
  border-radius: 10px;
}
#tboutlets-table{
  font-size: 14px;
}

#plan-1ss-summary
{
  font-size: 12px;
}

#plan-1ss-detail {
  font-size: 10px;
}

#plan-1ss-summary .tabulator-cell.cssOverflow {
  overflow: visible !important;
  position: relative;
}

#orderlist-table, #orderdet-table, #botusers-table, #plan-table, #distr-table, #storecheck-table {
  margin-bottom: 10px;
}

#orderlist-table, #orderdet-table, #outlets-table, #plan-table, #distr-table, #storecheck-table {
  font-family: "Arial Narrow", sans-serif;
  font-size: 11px;
  font-weight: 400;
}

#struct-table,
#access-table 
{
  font-family: "Arial Narrow", sans-serif;
  font-size: 11px;
  font-weight: 400;
}

#calendar{
  font-size: 14px;
  font-weight: 600;
  color: #c82424;
  margin-top: 10px;
  margin-bottom: 15px;
  margin-left: 10px;
}

.calendar {
  border: 1px;
  border-radius: 5px;
  height: 20px;
}

.tabulator-row.tabulator-selected {
  background-color: #b9d8bd !important;
}

.tabulator {
  background-color: #faf8f8;
}

.tabulator-cell.edit_col {
  color: darkgreen;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

.users-block-data {
  width: 70%;
}

#block_rights {
  width: 30%;
}

#rights-table,
#submenu-table {
  width: 100%;
  height: 100%;
}

#data-table,
#users-table {
  width: 99%;
  height: 100%;
}

.flex-container {
  display: flex;
  width: 100%;
}

.four {
  background: #f4f7ee;
  padding: 55px 15px;
  text-align: center;
}

.four h1 {
  font-family: 'Merriweather', serif;
  position: relative;
  color: #117015;
  font-size: 20px;
  font-weight: normal;
  padding: 8px 20px 7px 20px;
  border-top: 2px solid;
  border-left: 2px solid;
  display: inline-block;
  margin: 10;
  line-height: 1;
}

@media (max-width: 450px) {
  .four h1 {
    font-size: 36px;
  }

  .four h1:before {
    width: 10px;
    height: 20px;
    top: -10px;
    left: -20px;
  }
}

input[name="calendar"] {
  margin-bottom: 10px; /* Задайте нужное вам значение margin-bottom */
}

.disabled-row {
	opacity: 0.5;
	cursor: not-allowed;
	
  }

  .no-editing {
	pointer-events: none;
  }

  .editcol {
    background-color: rgb(249, 253, 139);
  }

  .tabulator .tabulator-footer {
    color: #0000FF;
    font-weight: 900;
    font-size: 11px;
    white-space: nowrap;
    -webkit-user-select: none;
    }

    #calendar{
      font-size: 14px;
      font-weight: 600;
      color: #c82424;
      margin-top: 10px;
      margin-bottom: 5px;
      margin-left: 10px;
    }

    .calendar {
      display: inline-block;	
      box-sizing: border-box;
      padding: 0 25px;
      margin: 0 5px 5px 0;
      outline: none;
      border: 1px solid #000000ad;
      border-radius: 5px;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      color: #444;
      background-color: #fff;
      box-shadow: 0 4px 6px rgb(65 132 144 / 10%), 0 1px 3px rgb(0 0 0 / 8%);
      cursor: pointer;
      user-select: none;
      appearance: none;
      touch-action: manipulation;  
      vertical-align: top;
      transition: box-shadow 0.2s;
    }

      
    .SumoSelect:has(#fio_select, #region_select) {
      padding-top: 0px !important;
    }

    .flex-container {
      display: flex;
      width: 100%;
    }

    #sku-table{
      background-color:#ccc;
      border: 1px solid #333;
      border-radius: 10px;
      font-size: 10px ;
      width: 99%;
          height: 100%;  
      }

      #map {
        width: 100%;
      }

      .leaflet-control-clear-markers {
        background: rgb(231, 216, 216);
        color: white;
        font-size: 16px;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 30px;
        border: 2px solid white;
        border-radius: 8px;
        cursor: pointer;
      }

      .hover-image {
        display: none;
        position: absolute;
        bottom: 50px; /* Позиционирование изображения над маркером */
        left: 0;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        z-index: 1000; /* Поверх всех других элементов */
      }


      #message-box {
        position: fixed;  
        width: 200px;
        top: 47px;
        left: 50%;
        transform: translateX(-50%); 
        background-color: white; 
        color: black;
        border-color: #117015;
        padding: 2px;
        text-align: center;
        border-radius: 5px;
        font-family: Arial, sans-serif;
        font-size: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: none; /* По умолчанию скрыто */
        z-index: 1000; /* Убедитесь, что сообщение отображается поверх других элементов */
    }


    .hover-button {
      position: relative;
      top: calc(0% + 1px); 
      right: -5px;
      padding: 1px 1px;
      font-size: 12px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      border-radius: 3px;
      z-index: 1000; /* Высокий индекс для отображения поверх других элементов */
  }

  .tabulator-cell {
    position: relative; /* Это нужно, чтобы кнопка могла позиционироваться внутри ячейки */
  }

  .tabulator .highlight-cell {
    background-color: red !important;
  }

  .tabulator .tabulator-tree-level-0 .tabulator-cell.highlight-cell,
  .tabulator .tabulator-tree-level-1 .tabulator-cell.highlight-cell,
  .tabulator .tabulator-tree-level-2 .tabulator-cell.highlight-cell,
  .tabulator .tabulator-tree-level-3 .tabulator-cell.highlight-cell,
  .tabulator .tabulator-tree-level-4 .tabulator-cell.highlight-cell,
  .tabulator .tabulator-tree-level-5 .tabulator-cell.highlight-cell {
      background-color: rgb(239, 228, 228) !important;
  }

  /* Контейнер для кнопок */
.hover-button-container {
  position: absolute;
  top: calc(0% + 2px); 
  right: -10px; 
  display: flex;
  flex-direction: column;
  z-index: 1000; /* Повышаем z-index */
}

/* Стили для кнопок */
.hover-cancel-button, .hover-share-button, .hover-analytics-button {
  padding: 1px 1px;
  font-size: 12px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 1px;
}

.hover-share-button {
  position: relative; 
}

/* Дополнительные кнопки */
.extra-buttons-container {
  position: absolute;
  bottom: 0;
  left: 100%; /* Всегда располагается справа от кнопки "🔄" */
  display: flex;
  flex-direction: row;
  gap: 2px;
  z-index: 1001; /* Поверх других элементов */
}

.hover-month-button {
  padding: 1px 1px;
  font-size: 10px;
  background-color: #e1baba;
  border: 1px solid #1b1a1a;
  border-radius: 3px;
  margin-bottom: 1px;
}

.hover-month-button:hover {
  background-color: #ece409;
}


#plan-table .tabulator-cell.cssOverflow {
  overflow: visible !important;
  position: relative;
}


#conteiner-buyers-table {
  display: flex;
  gap: 1%;
  width: 100%;
}

#buyers-table,
#planbuyers-table {
  width: 50%;
  height: 100%;
}

#conteiner-buyers-btn {
  display: flex;
  gap: 1%;
  width: 100%;
}

#btn-buyers,
#btn-planbuyers {
  width: 50%;
  height: 100%;
}

.btn-buyer {
  background-color: #5bee47;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 1px;
}

.btn-buyer:disabled {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 1px;
}