/*---------------------------------------
  CONTAINERS            
-----------------------------------------*/

.table{
    display: table;
    align-items: start;
  }
  
  .table-row{
    display: table-row;
    align-items: start;
    width: 100%;
    cursor: pointer;
  }
  
  .table-row:hover > p{
    color: var(--primary-color);
  }
  
  .table-cell{
    display: table-cell;
    padding: 5px 10px 5px 0;
  }
  
  .flex-row {
    display: flex;
    flex-direction: row;
    width: 100%;       
  }
  
  .flex-row-center {
    display: flex;
    width: 100%;   
    flex-direction: row;
    justify-content: center;
    align-items: center;       
  }
  
  .flex-row > * {          /* Предполагаем, что дочерние элементы - это div */
    flex: 1;               /* Каждый дочерний элемент будет занимать равную долю пространства */
    box-sizing: border-box; /* Учитываем ширину границ и отступов */
  }
  
  .flex-row-start {
    display: flex;
    width: 100%;  
    justify-content: start;
    align-items: center;
    gap: 10px;     
  }
  
  .flex-row-end {
    display: flex;
    width: 100%;  
    justify-content: end;
    align-items: center;
    gap: 10px;     
  }
  
  .flex-column {     
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
    justify-content: center;
  }
  
  .flex-column-start {     
    display: flex;
    flex-direction: column;
    /*margin: auto;*/
    align-items: start;
    justify-content: start;
  }
  
  .flex-container{
    display: flex;
    align-items: center;
  }
  
  .flex-column > p {
    align-content: center;
  }
  
  .none{
    display: none;
  }

  .align-items-start{
    align-items: flex-start !important;
  }

  /*---------------------------------------
ADAPTIVE
-----------------------------------------*/
@media(max-width:460px){

  .table-cell{
      font-size: 10px;
      line-height: 12px;
      padding: 3px;
  }
}