/* Shared forms components extracted from legacy global.scss. */

input,
textarea,
select{
  cursor: default;

  &:focus{
    /* outline: 0; */
    /* border-color: var(--balter-color-secondary-2-4); */
  }

}

.big_text_area{
  position: relative;
  max-width: 100%;

  img{
    position: relative;
    max-width: 100%;
  }

}

.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;   /* prevent horizontal scrollbar */
  overflow-x: hidden; /* add padding to account for vertical scrollbar */
  z-index: 1000 !important;
}

.perselector_container{
  position: relative;
  padding-right: 100px;

  .dynamic_content__button__ajax_popup{
    position: absolute;
    right: 0;
    top: 0;
  }

  &.simple{
    padding-right: 0;
  }

}

.seriselector_container{
  position: relative;
  padding-right: 100px;

  .dynamic_content__button__ajax_popup{
    position: absolute;
    right: 0;
    top: 0;
  }

}

.popup_ajax_form_send{

  &.blocked{
    cursor: default;
    opacity: 0.3;
  }

}

.dynamic_datetime__set{
  position: relative;
  line-height: 20px;
  min-height: 20px;
  font-size: 14px;
  border-radius: 4px;
  transition: 0.3s background-color ease;

  input{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(100% - 10px);
    cursor: pointer;
    opacity: 0;
  }

  &:hover{
    background-color: #dfffde;
  }

}

#ui-datepicker-div{
  z-index: 100 !important;
}

.input_with_label {
  display: flex;
  align-items: center;

  .details_label {
    flex: 1;
    padding: 0 3px;
  }

  input {
  }


}

.linebreak_anywhere{
  line-break: anywhere;
}

.container__inline_fields{
  position: relative;
  font-size: 0;
  line-height: 0;
}

form,
.pseudoform{
  font-size: 0;
  line-height: 0;

  .cpes_toggler_on,
  .cpes_toggler_off{
    position: absolute;
    display: none;
    right: 5px;
    top: 5px;
    height: 30px;
    width: 30px;
    text-align: center;
    cursor: pointer;
    opacity: 0.6;
    background-color: #eaeaea;

    i{
      font-size: 16px;
      line-height: 30px;
    }

    &:hover{
      opacity: 1;
    }

    &.active{
      display: block;
      opacity: 1;
    }

  }

  .field{
    position: relative;
    display: block;
    margin: 0 20px 10px 10px;
    font-size: 16px;
    line-height: 20px;
    width: calc(100% - 20px);

    label{
      position: relative;
      display: block;
      width: 100%;
      font-weight: 600;
      line-height: 30px;

      /*&:first-letter{
        color: #A52133;
      }*/
    }
  }

  .inline_group,
  .inline_field{
    position: relative;
    display: inline-block;
    /* margin: 0 20px 10px 0; //2px por espacios entre elementos de font-size */
    /* margin: 0 10px 10px 10px; //2px por espacios entre elementos de font-size */
    margin: 0 5px 5px 5px;
    font-size: 16px;
    line-height: 20px;
    width: calc(100% - 10px);
    /* vertical-align: bottom; */
    vertical-align: top;

    &.iconed{

      input,
      .tagify,
      .select2-container,
      select{
        border-left-width: 29px;
        border-left-color: #f7f7f7 !important;
      }

      .cp_body{
        margin-left: 35px;
      }

      textarea{
        padding-left: 35px;
      }

    }

    &.multiselects_field{

      .selects{
        position: relative;
        display: flex;
        order: 6;
        flex-direction: row;

        select{
          min-width: auto !important;
          border-radius: 0;

          &:first-child{
            border-top-left-radius: 6px;
          }

          &:last-child{
            border-bottom-right-radius: 6px;
          }
        }
      }
    }

    &.extra_icon_button{
      input,
      select,
      textarea{
        width: calc(100% - 46px);
      }

      .button_container{
        margin: 0;
      }
    }

    label{
      position: relative;
      display: block;
      width: 100%;
      font-weight: 500;
      line-height: 20px;
      padding-left: 5px;
      /* line-height: 30px; */
      user-select: none;

      /*&:first-letter{
        color: #A52133;
      }*/
    }

    .icon{
      /* position: absolute; */
      /* z-index: 1; */
      /* width: 26px; */
      /* height: 26px; */
      /* margin: 4px; */
      position: absolute;
      z-index: 1;
      width: 28px;
      height: 28px;
      margin: 1px;
      padding: 1px;
      box-sizing: border-box;
      background-color: #fffffff0;
      border-radius: 6px 0 0 0;
    }

    .attribute{
      position: relative;
      display: inline-block;
      width: auto;
      margin: 0 5px 5px 0;
      padding: 0 5px;
      border: 1px solid #cfcfcf;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      line-height: 22px;
      min-height: 24px;
      vertical-align: middle;
      box-sizing: border-box;
      font-weight: 500;

      input[type="checkbox"]{
        position: relative;
        vertical-align: top;
        margin: 5px 0 0 0;
        padding: 0;

      }

      input[type="text"],
      input[type="datetime-local"],
      input[type="datetime-local"],
      input[type="number"],
      input[type="tel"],
      input[type="email"]{
        position: relative;
        vertical-align: top;
        width: auto;
        margin-right: -5px;
        border: 0;
        border-left: 1px solid #f5f5f5;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        line-height: 22px;
        height: 22px;

      }

      input:read-only{
        background-color: #fcfcfc;
        cursor: default;
      }


      .unclickable{
        opacity: 0.4;
      }

    }

    .big_textarea{
      height: 100px;
      resize: vertical;
    }

    .multi_elements_container{

      .multi_element_tupla{
        display: none;
      }

      .multi_elements{
        position: relative;

        .multi_element{
          position: relative;
          font-size: 0;
          line-height: 0;
          margin-bottom: 5px;

          input{
            position: relative;
            display: inline-block;
            font-size: 16px;
            line-height: 20px;
            width: calc(100% - 30px);
          }

          .delete_button{
            position: relative;
            display: inline-block;
            font-size: 16px;
            line-height: 20px;
            width: 30px;
            cursor: pointer;
            color: lightgrey;
            transition: 0.3s all ease;
            text-align: center;
            user-select: none;
          }

        }

      }

      .add_button{
        position: relative;
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        cursor: pointer;
        height: 20px;
        text-align: center;
        background-color: #d7ffe1;
        border-radius: 5px;
        margin: 5px 0 0 auto;
        padding: 0 5px;
        user-select: none;

      }

    }

    .complex_area{
      position: relative;
      font-size: 0;
      line-height: 0;
      vertical-align: top;

      /*input[name="cif"]{
        width: 100%;
        border-radius: 0 4px 4px 0;
        vertical-align: top;
        transition: 0.3s all ease;
      }*/

      &[data-validated="false"]{

        input[name="cif"]{
          background-color: rgba(255, 0, 0, 0.3);
        }
      }

      .autocomplete_area{
        position: absolute;
        z-index: 1;
        right: 0;
        font-size: 16px;
        line-height: 20px;
        background-color: white;
        border: 1px;
        width: 100%;
        max-width: 300px;
        border: 1px solid lightgrey;

        &.hidded{
          display: none;
        }

        .autocomplete_row{
          position: relative;
          cursor: pointer;
          margin: 3px;
          border-radius: 4px 0 4px 0;
          overflow: hidden;
          transition: 0.3s all ease;
          background-color: #f6f6f6;

          &:hover{
            background-color: #ececec;
            margin: 3px 3px 3px 6px;
            border-radius: 4px;
          }

          &.client{
            font-size: 0;
            line-height: 0;

            .company_name{
              position: relative;
              display: block;
              font-size: 16px;
              line-height: 20px;
              vertical-align: top;
              padding: 0 5px;
              box-sizing: border-box;
              background-color: #e8e8e8;
            }

            .avatar{
              position: relative;
              display: inline-block;
              width: 40px;
              vertical-align: top;
              border-bottom: 1px solid lightgrey;

              img{
                position: relative;
                width: 100%;
              }

            }

            .person_data{
              position: relative;
              display: inline-block;
              width: calc(100% - 40px);
              font-size: 16px;
              line-height: 20px;
              vertical-align: top;
              padding: 0 5px;
              box-sizing: border-box;
              border-bottom: 1px solid lightgrey;

              .full_name{
                display: block;
              }

              .email{
                display: block;
              }

            }

          }

        }

      }

    }

    .fast_beauty_checkbox{
      display: flex;
    }

    &.w5{
      width: calc(5% - 10px);

      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w10{
      width: calc(10% - 10px);

      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w15{
      width: calc(15% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w20{
      width: calc(20% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w25{
      width: calc(25% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w30{
      width: calc(30% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }
    &.w33{
      width: calc(33% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w34{
      width: calc(34% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w35{
      width: calc(35% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w40{
      width: calc(40% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w45{
      width: calc(45% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w50{
      width: calc(50% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w55{
      width: calc(55% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w60{
      width: calc(60% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w65{
      width: calc(65% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w70{
      width: calc(70% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w75{
      width: calc(75% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w80{
      width: calc(80% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w85{
      width: calc(85% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.w90{
      width: calc(90% - 10px);
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.wauto{
      width: auto;
      @media only screen and (max-width: 767px){
        width: calc(100% - 10px);
      }
    }

    &.valign_top{
      vertical-align: top;
    }

    &.valign_text_bottom{
      vertical-align: text-bottom;
    }

    &.hidded{
      display: none;
    }

    &.error{
      input{
        background-color: var(--balter-color-primary-2);
        color: white;
      }
    }

    &.opaco{
      opacity: 0.3;

      input,
      select,
      textarea{

        &.advice_low,
        &.advice_medium,
        &.advice_hight{
          box-shadow: none;
        }
      }

    }

    .required{
      color: var(--balter-color-primary-0);
    }

    .field_helptext{
      /* position: absolute; */
      right: 0;
      bottom: 0;
      display: inline-block;
      font-weight: 600;
      font-size: 14px;
      line-height: 14px;
      width: 14px;
      height: 14px;
      text-align: center;
      overflow: hidden;
      color: white;
      background-color: var(--balter-blue-1);
      text-decoration: none;
      border-radius: 50px;
      opacity: 0.3;
      transition: 0.3s opacity ease;
      vertical-align: middle;

      &:hover{
        opacity: 1;
      }
    }

    .field_description{
      position: relative;
      display: block;
      font-size: 13px;
      line-height: 14px;
      text-align: left;
      text-decoration: none;
      transition: 0.3s opacity ease;
      color: #333;
      padding-left: 5px;
    }

    .field_advice{
      position: relative;
      display: none;
      font-size: 14px;
      line-height: 16px;
      padding: 2px 5px;
      margin-top: 2px;
      border-radius: 3px;
      text-align: left;
      text-decoration: none;
      transition: 0.3s opacity ease;
      color: #333;
      background-color: #ffcc2e;

      &.active{
        display: block;
      }
    }

    .button_container{
      margin-bottom: 4px;

      .button{
      }
    }

    &.inline_field_perecent_and_input{

      img{
        z-index: 3;
      }

      .percent_i {
        width: 45%;
        z-index: 2;
        border-bottom-right-radius: 0;
        text-align: right;
      }

      .value_i {
        z-index: 1;
        width: calc(55% + 5px);
        margin-left: -10px;
        border-left: 0;
        text-align: right;

        &:read-only{
          opacity: 0.5;
        }
      }

    }


    &.inline_field_two_inputs{

      img{
        z-index: 3;
      }

      .inputs{
        position: relative;
        box-sizing: border-box;
        font-size: 0;
        line-height: 0;

        input{
          z-index: 1;
          width: 50%;
          margin-left: 0;
          border-left: 0;
          text-align: right;

          &:read-only{
            opacity: 0.6;
          }
        }

      }

    }

  }

  .inline_group{
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
    border: 1px solid #fcffff;

    .inline_group_title{
      position: relative;
      display: block;
      box-sizing: border-box;
      font-size: 16px;
      line-height: 20px;
      font-weight: 400;
      padding-left: 5px;
      user-select: none;
      background-color: #fcffff;

      /*&:first-letter{
        color: #A52133;
      }*/

    }

    .inline_group_description{
      position: relative;
      display: block;
      box-sizing: border-box;
      font-size: 14px;
      line-height: 16px;
      font-weight: 400;
      padding-left: 5px;
      user-select: none;
      background-color: #fafafa;

    }


  }

  .hidded_field{
    display: none !important;
  }

  br{
    line-height: 20px;
  }

  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="password"],
  input[type="tel"],
  input[type="time"],
  input[type="email"]
  {
    position: relative;
    border: 1px solid #cfcfcf;
    /* border-left: 5px solid #f5f5f5; */
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    height: 30px;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s all ease;
    border-radius: 6px 2px;
    vertical-align: top;

    &:read-only{
      /* border-top: 0; */
      /* border-right: 0; */
      cursor: default;
      background-color: #fdfdfd;
      /* border-color: #fdfdfd; */
    }

    &.recently_added{
      background-color: #eefdec;
    }

    &:disabled{
      color: #444;
      cursor: default;
      opacity: 1;
      border-top: 0;
      border-right: 0;
      background-color: #fdfdfd;

    }

    &:focus{
      outline: 0;
      /* border-color: var(--balter-color-secondary-2-4); */
    }

    &:hover{
      /* border-color: var(--balter-gray-1); */
    }

    &.recently_changed{
      background-color: #e6f2ff;
    }

    &:focus{
      box-shadow: inset 0 0 5px #ededed;
    }

  }


  .pseudoinput{
    position: relative;
    border: 1px solid #cfcfcf;
    /* border-left: 5px solid #f5f5f5; */
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    height: 30px;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s all ease;
    border-radius: 6px 2px;
    user-select: all;
  }

  .select2-container{
    position: relative;
    border: 1px solid #cfcfcf;
    /* border-left: 5px solid #f5f5f5; */
    font-weight: 500;
    font-size: 16px;
    min-height: 28px;
    width: 100% !important;
    box-sizing: border-box;
    transition: 0.3s all ease;
    border-radius: 6px 2px;
    user-select: all;

    .select2-selection,
    .select2-selection--multiple{
      border: 0;
      border-radius: 0 0 4px 0;
      min-height: 29px;
    }

    .select2-selection__rendered,
    .select2-selection__arrow{
      line-height: 28px !important;
      color: black;
    }

    &.select2-container--focus{

      .select2-selection--multiple{
        border: 0;
      }

    }

    &.select2-container--default{

      .select2-selection--multiple{
        line-height: 0 !important;
        font-size: 14px !important;
        border-radius: 4px;

        .select2-selection__choice{
          position: relative;
          background-color: #fcfcfc;
          border: 1px solid #cfcfcf;
          border-radius: 4px;
          cursor: default;
          float: left;
          margin: 1px 2px 0 2px;
          padding: 0 20px 0 5px;
          font-size: 14px !important;
          line-height: 24px !important;

          .select2-selection__choice__remove{
            position: absolute;
            top: calc(50% - 10px);
            right: 0;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 20px;
          }

          .select2_option__member{
            grid-template-columns: 20px 1fr;

            .avatar{
              width: 20px;
            }

            .text{
              line-height: 20px;
            }

          }


        }

      }

    }

  }

  .tagify{
    position: relative;
    border: 1px solid #cfcfcf;
    /* border-left: 5px solid #f5f5f5; */
    font-weight: 500;
    font-size: 15px;
    line-height: 30px;
    min-height: 30px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s all ease;
    border-radius: 6px 2px;

    .tagify__input{
      margin: 0 10px;
      padding: 0;
      font-size: 14px;
      line-height: 30px;
      height: 30px;
      min-width: 30px;
    }

    .tagify__tag {
      margin: 3px;
      padding: 0 0 0 10px;
      font-size: 16px;
      line-height: 28px;
      height: 28px;

      div{
        padding: 0;

        &:before{
          background-color: #f5f5f5;
          box-shadow: none;
        }
      }
    }

    &.tagify--focus{
      outline: none;
      border-color: var(--balter-color-primary-4);
    }

    &:hover{
      border-color: var(--balter-color-primary-4);
    }

  }

  textarea{
    position: relative;
    border: 1px solid #cfcfcf;
    /* border-left: 5px solid #f5f5f5; */
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    height: 100px;
    min-height: 60px;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s all ease;
    resize: vertical;
    vertical-align: top;

    &.recently_added{
      background-color: #eefdec;
    }

    &#contract_conditions_textarea{
      min-height: 1200px;
    }

    &:read-only{
      border-top: 1px solid transparent;
      border-right: 1px solid transparent;
      cursor: default;
      border-radius: 0 0 0 6px;
    }

    &:disabled{
      background-color: #f5f5f5;
      color: #444;
      cursor: default;
      opacity: 1;
      border-top: 0;
      border-right: 0;
      border-radius: 0 0 0 6px;
    }

    &:focus{
      outline: 0;
      /* border-color: var(--balter-color-secondary-2-4); */
    }

    &:hover{
      /* border-color: var(--balter-gray-1); */
    }
  }

  select{
    position: relative;
    border: 1px solid #cfcfcf;
    /* border-left: 5px solid #f5f5f5; */
    /* border-radius: 4px; */
    font-weight: 500;
    font-size: 15px;
    line-height: 30px;
    height: 30px;
    padding: 0 10px;
    width: 100%;
    border-radius: 6px 2px;
    transition: 0.3s all ease;
    vertical-align: top;

    optgroup{
      color: #333;
    }

    &.recently_added{
      background-color: #eefdec;
    }

    &:disabled{
      background-color: #f5f5f5;
      color: #444;
      cursor: default;
      opacity: 1;
      border-top: 0;
      border-right: 0;
      border-radius: 0 0 0 6px;
    }

    &:hover{
      border-color: var(--balter-gray-1);
    }
  }

  .yesno_field_flag{
    position: relative;
    line-height: 30px;
    height: 30px;
    padding: 0 10px;
    /* border-left: 5px solid #f5f5f5; */
    border-bottom: 1px solid #f5f5f5;
    border-radius: 0 0 0 6px;

  }

  .system_attributes_group{

    h3{
      margin: 10px 0 5px 0;
    }

    .person_types_label_button{
      line-height: 20px;
    }

  }

  .return_message{

    .message_ok{
      position: relative;
      display: block;
      margin-top: 15px;
      border: 1px solid var(--balter-color-complement-0);
      color: var(--balter-color-complement-0);
      padding: 10px;
      font-size: 14px;
      line-height: 20px;
    }

    .message_advent{
      position: relative;
      display: block;
      margin-top: 15px;
      border: 1px solid var(--balter-color-secondary-1-2);
      color: var(--balter-color-secondary-1-2);
      padding: 10px;
      font-size: 14px;
      line-height: 20px;
    }

    .message_error{
      position: relative;
      display: block;
      margin-top: 15px;
      border: 1px solid var(--balter-color-primary-3);
      color: var(--balter-color-primary-3);
      padding: 10px;
      font-size: 14px;
      line-height: 20px;

    }

  }

  button{
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    margin: 0;
    background-color: var(--balter-background-1);
    /* border: 1px solid #A52133; */
    /* border-left: 2px solid #A52133; */
    /* color: #A52133; */
    border: 1px solid var(--balter-primary-color);
    border-left: 2px solid var(--balter-primary-color);
    color: var(--balter-primary-color);
    transition: 0.2s all ease;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0;
    line-height: 0;
    text-align: left;

    i{
      position: relative;
      display: inline-block;
      color: #333;
      font-size: 16px;
      line-height: 16px;
      width: 20px;
      text-align: center;
      margin: 2px 0;
      vertical-align: top;
      background-color: white;
      padding: 4px;
      border-radius: 0 4px 4px 0;
      overflow: hidden;
    }

    img{
      position: relative;
      display: inline-block;
      color: #333;
      font-size: 16px;
      line-height: 16px;
      width: 24px;
      text-align: center;
      margin: 0;
      vertical-align: top;
      background-color: white;
      padding: 2px;
      border-radius: 0 4px 4px 0;
      overflow: hidden;
    }

    .text{
      position: relative;
      display: inline-block;
      margin: 5px 10px;
      font-size: 16px;
      line-height: 18px;
      min-width: 40px;
      vertical-align: top;
      text-align: center;
    }

    &:hover{
      /* background-color: var(--balter-color-primary-3); */
      background-color: var(--balter-background-2);
      color: var(--balter-color-primary-2);
    }

    &.hidded{
      display: none !important;
    }
  }

  /*@media only screen and (max-width: 500px){
    display: flex;
    flex-direction: column;
    align-items: flex-start;


    .nzone_left {
      order: 2;
    }

    .nzone_right {
      order: 1;
    }
  }*/


}

label,
.attribute{
  cursor: default !important;
}

.filters,
.filters_2{
  position: relative;
  display: block;
  z-index: 90;
  /* background: #4b4b4b; */
  /* background: linear-gradient(to left, #4b4b4b 64%, #670000 95%, #670000 100%); */
  font-size: 0;
  line-height: 0;
  padding: 5px 5px 0 5px;
  /* border-top: 1px solid white; */
  /* border-left: 4px solid black; */
  text-align: left;
  /* float: right; */
  /* background-image: url('/library/images/textures/bright-squares.png'); */
  /* background-position: center; */
  /* background-size: 200px; */
  /* background-repeat: repeat; */
  background-color: white;

  min-height: 30px;
  /* margin: 0 0 10px 0; */
  /* border: 1px solid lightgrey; */

  .filters_left{
    position: relative;
    display: block;
    float: left;
    text-align: left;
  }

  .filters_right{
    position: relative;
    display: block;
    float: right;
    text-align: right;
  }

  .filters_center{
    position: relative;
    display: block;
    float: left;
    width: 100%;
    text-align: center;
  }

  .search_area{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: 0 0 5px 5px;
    vertical-align: top;

    i{
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      font-size: 15px;
      width: 30px;
      text-align: center;
      line-height: 28px;
      height: 28px;
      /* color: #444; */
      /* background-color: #f6f6f6; */
      border: 1px solid var(--balter-primary-color);
      border-right-width: 0;
      color: var(--balter-primary-color);
      background-color: white;
      padding: 0 5px;
      vertical-align: top;
      border-radius: 4px 0 0 4px;
      cursor: pointer;
    }

    input{
      border: 1px solid var(--balter-primary-color);
      border-radius: 0 4px 4px 0;
      border-left: 0;
    }

  }

  .button__clear_filters{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: 0 0 5px 5px;
    vertical-align: top;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #f6f6f6;
    /* border: 1px solid #aaa; */
    overflow: hidden;
    transition: 0.1s all ease;
    border: 1px solid var(--balter-primary-color);

    img{
      position: relative;
      display: inline-block;
      vertical-align: top;
      line-height: 20px;
      cursor: pointer;
      width: 20px;
      height: 20px;
      margin: 3px;

    }

    &.hidden{
      width: 0;
      border-color: transparent;
      border: 0;
      background-color: transparent;
    }

  }

  .dynamic_table_loading_indicator{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: 0 0 5px 0;
    vertical-align: top;
    width: 0;
    height: 28px;
    border-radius: 50%;
    background-color: #f6f6f6;
    overflow: hidden;
    transition: 0.1s all ease;

    img{
      position: relative;
      display: inline-block;
      vertical-align: top;
      line-height: 20px;
      width: 20px;
      height: 20px;
      margin: 4px;

    }

    &.active{
      width: 28px;
    }
  }

  .group_switchers{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    background-color: var(--balter-background-1);
    border: 1px solid var(--balter-primary-color);
    user-select: none;

    .group_switcher{
      position: relative;
      box-sizing: border-box;
      display: inline-block;
      padding: 0 10px;
      margin: 0;
      border: 0;
      /* background-color: var(--balter-primary-color); */
      background-color: var(--balter-background-1);
      border-left: 1px solid var(--balter-primary-color);
      transition: 0.2s all ease;
      text-decoration: none;
      cursor: pointer;

      &:first-child{
        border-left: 0;
      }

      .text{
        position: relative;
        display: inline-block;
        margin: 4px;
        font-size: 14px;
        line-height: 20px;
        min-width: 40px;
        vertical-align: top;
        text-align: center;
      }

      &.active{
        /* background-color: var(--balter-color-primary-3); */
        background-color: var(--balter-primary-color);
        color: white;
      }

      &.hidded{
        display: none !important;
      }
    }

  }

  .filter_datepicker,
  .filter_selector{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: 0 0 5px 5px;
    vertical-align: top;
    line-height: 0;
    font-size: 0;
    opacity: 0.9;

    .filter_title{
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      font-size: 14px;
      line-height: 28px;
      height: 28px;
      border: 1px solid var(--balter-primary-color);
      border-right-width: 0;
      background-color: white;
      color: black;
      padding: 0 5px;
      vertical-align: top;
      border-radius: 4px 0 0 4px;
      cursor: pointer;
      transition: 0.3s all ease;
    }

    .select2{
      font-size: 14px;
      line-height: 28px;
      max-width: 21px;
      transition: 0.3s all ease;

      .select2-selection{
        border: 1px solid var(--balter-primary-color);
        border-left: 0;
        border-radius: 0 4px 4px 0;

        .select2-selection__rendered{
          visibility: collapse;
        }
      }

    }

    select{
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      font-size: 14px;
      line-height: 28px;
      height: 28px;
      color: #333;
      background-color: #fafafa;
      border: 1px solid var(--balter-primary-color);
      border-left-width: 0;
      padding: 0 3px;
      cursor: pointer;
      vertical-align: top;
      border-radius: 0 4px 4px 0;
      max-width: 300px;

      option{
        background-color: white;
        color: #333;
      }

    }

    input{
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      font-size: 14px;
      line-height: 28px;
      height: 28px;
      color: #333;
      background-color: #fafafa;
      border: 1px solid var(--balter-primary-color);
      border-left-width: 0;
      padding: 0 3px;
      vertical-align: top;
      border-radius: 0 4px 4px 0;
      min-width: unset;

    }

    &.applied_filter{
      opacity: 1;

      .filter_title{
        /* background-color: #ebffeb; */
        background-color: var(--balter-primary-color);
        color: white;
      }

      .select2{
        max-width: 250px;

        .select2-selection{

          .select2-selection__rendered{
            visibility: visible;
          }
        }

      }

    }

    /* toggle buttons */
    &.toggle_buttons{

      .filter_title{
        cursor: default;
      }

      select,
      .select2{
        display: none;
      }

      .select_toggle_buttons_layer{
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 28px;
        height: 28px;
        color: #333;
        background-color: #fafafa;
        border: 1px solid var(--balter-primary-color);
        padding: 0;
        vertical-align: top;
        border-radius: 0 4px 4px 0;
        overflow: hidden;

        .toggle_button{
          position: relative;
          display: inline-block;
          padding: 0 3px;
          line-height: 28px;
          cursor: pointer;
          color: black;
          transition: 0.3s all ease;
          vertical-align: top;
          border-right: 1px solid lightgrey;
          opacity: 0.6;

          &.selected{
            /* background-color: #ebffeb; */
            /* background-color: #A52133; */
            cursor: default;
            font-weight: 600;
            color: var(--balter-primary-color);
            opacity: 1;
          }

          &:last-child{
            border-right: 0;
          }

        }

      }

    }

    &.hidden_by_other_filter{
      display: none;
    }

  }

  .filter_datepicker{
    max-width: unset;
  }

  .filters_group{
    position: relative;
    display: none;

    &.active{
      display: inline-block;
    }

  }


  input{
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 28px;
    height: 28px;
    min-width: 200px;
    color: #333;
    background-color: #fafafa;
    border: 0;
    padding: 0 3px;
    border-radius: 0 4px 4px 0;
    vertical-align: top;

  }

  .button_edit_entity{
    position: relative;
    display: inline-block;
    z-index: 100;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    margin: 0 5px 0 0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    background-color: var(--balter-primary-color);
    color: white;
    border: 1px solid gray;
    border-top: 0;
    transition: 0.3s all ease;
    vertical-align: top;
    box-sizing: border-box;
    text-decoration: none;

    &:hover{
      background-color: var(--balter-color-primary-4);
    }

  }

  .button_toggle_user_option{
    position: relative;
    display: inline-block;
    z-index: 100;
    height: 30px;
    min-width: 30px;
    text-align: center;
    line-height: 30px;
    margin: 0 0 0 5px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    background-color: white;
    color: #333;
    border: 1px solid gray;
    transition: 0.3s all ease;
    vertical-align: top;
    box-sizing: border-box;
    text-decoration: none;

    .fa-times{
      display: inline-block;
    }

    .fa-check{
      display: none;
    }

    .text{
      display: inline-block;
      font-size: 14px;
      vertical-align: top;
    }

    &:hover{
      background-color: #f8ffef;
    }

    &.active{
      background-color: #eaffde;

      .fa-times{
        display: none;
      }

      .fa-check{
        display: inline-block;
      }
    }

  }

  .mass_actions{
    position: relative;
    display: inline-block;
    float: left;
    vertical-align: top;
    margin: 0 5px 0 0;
    border: 1px solid var(--balter-primary-color);

    select{
      width: 170px;
      height: 28px;
      line-height: 28px;
    }

    .button_mass_action_execute{
      position: relative;
      display: inline-block;
      z-index: 100;
      height: 28px;
      line-height: 28px;
      padding: 0 20px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      background-color: var(--balter-primary-color);
      color: white;
      border: 1px solid gray;
      border-top: 0;
      transition: 0.3s all ease;
      vertical-align: top;
      box-sizing: border-box;
      text-decoration: none;

      &:hover{
        background-color: var(--balter-color-primary-3);
      }

    }

  }

  .action_buttons{
    display: inline-block;
  }

  .form_as_button{
    position: relative;
    display: inline-block;
    vertical-align: top;

    button{
      position: relative;
      display: inline-block;
      z-index: 100;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin: 0 5px 0 0;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      background-color: var(--balter-primary-color);
      color: white;
      border: 1px solid gray;
      border-top: 0;
      transition: 0.3s all ease;
      vertical-align: top;
      box-sizing: border-box;
      text-decoration: none;

      &:hover{
        background-color: var(--balter-color-primary-3);
      }
    }
  }

  .all_table_spoilers__collapse,
  .all_table_spoilers__open,
  .all_widget_spoilers__collapse,
  .all_widget_spoilers__open{
    position: relative;
    display: inline-block;
    z-index: 100;
    height: 30px;
    line-height: 30px;
    margin: 0 0 0 5px;

    .filter_title{
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      font-size: 14px;
      line-height: 28px;
      height: 28px;
      border: 1px solid var(--balter-primary-color);
      border-right-width: 0;
      background-color: white;
      color: black;
      padding: 0 5px;
      vertical-align: top;
      border-radius: 4px 0 0 4px;
      cursor: pointer;
      transition: 0.3s all ease;
    }

    i{
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      font-size: 15px;
      width: 30px;
      text-align: center;
      line-height: 28px;
      height: 28px;
      /* color: #444; */
      /* background-color: #f6f6f6; */
      border: 1px solid var(--balter-primary-color);
      border-left-width: 0;
      color: var(--balter-primary-color);
      background-color: white;
      padding: 0 5px;
      vertical-align: top;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
    }

  }

}