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

.generic_interface{
  position: relative;
  box-sizing: border-box;
  /* padding: 10px 10px 10px 10px; */
  padding: 10px 20px 0 20px;
  z-index: 80;
  /* margin: 50px 5px 5px 5px; */
  /* margin: 45px 0 0 0; */
  margin: 0;
  height: calc( 100vh - 65px );
  overflow-y: scroll;
  /* transition: 0.3s all ease; */

  /*&::-webkit-scrollbar {
    z-index: 94;
    width: 5px;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  }
  &::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
  }*/

  @media only screen and (max-width: 1600px){
    padding: 10px 10px 0 10px;
  }
  @media only screen and (max-width: 960px){
    padding: 10px 10px 0 10px;
    height: auto;
    min-height: calc( 100vh - 35px );
  }
  @media only screen and (max-width: 600px){
    padding: 10px 5px 0 5px;
  }

  .generic_interface{
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    height: auto;
    width: 100%;
  }

  h1,
  .h1{
    position: relative;
    z-index: 70;
    /* padding: 10px 0; */
    /* padding:5px 0; */
    width: 100%;
    min-height: 40px;
    color: #333;
    font-size: 22px;
    line-height: 40px;
    box-sizing: border-box;
    text-align: left;
    background-color: white;
    margin: 1px 0 30px 0;
    vertical-align: top;
    /* box-shadow: 1px 1px 6px -2px rgba(0,0,0,.2); */
    box-shadow: 1px 1px 3px rgba(6, 6, 6, 0.2);
    border-radius: 0 0 7px 7px;

    .is_user_favourite_interface{
      position: relative;
      display: inline-block;
      height: 32px;
      vertical-align: top;
      margin: 4px 0;
      cursor: pointer;

      img{
        position: relative;
        height: 24px;
        margin-top: 4px;

        &.favourite_on{ display: none; }
        &.favourite_off{ display: block; }

      }

      @media only screen and (max-width: 600px){
        height: 25px;
        img{
          height: 13px;
        }
      }

      @media only screen and (max-width: 500px){
        height: 20px;
        margin: 0;
      }

      &.active{

        img{
          &.favourite_on{ display: block; }
          &.favourite_off{ display: none; }

        }

      }

    }

    .pageicon{
      position: relative;
      display: inline-block;
      height: 32px;
      vertical-align: top;
      margin: 4px 10px;
    }

    .avatar{
      position: relative;
      display: inline-block;
      height: 32px;
      vertical-align: top;
      border: 1px solid var(--balter-primary-color);
      box-sizing: border-box;
      background-color: white;
      margin: 4px 10px;
    }

    .title_avatar_replacer{
      position: relative;
      display: inline-block;
      height: 32px;
      vertical-align: top;
      border-left: 5px solid #e7e7e7;
      box-sizing: border-box;
      margin: 4px 10px 4px 0;

      @media only screen and (max-width: 767px){
        display: none;
      }

    }

    .h1_title{
      position: absolute;
      top: 5px;
      z-index: 90;
      left: 70px;

    }

    .entity_title{
      position: relative;
      display: inline-block;
      font-weight: 600;
    }

    .interface_title{
      position: relative;
      display: inline-block;
      font-weight: 400;
    }

    .h1_title_center{
      position: relative;
    }

    .field_helptext{
      position: relative;
      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;
      }
    }

    /*.button_interface{
      position: absolute;
      top: 5px;
      z-index: 90;
      left: 10px;
      display: inline-block;
      background-color: #fff;
      cursor: pointer;
      text-align: center;
      font-weight: 100;
      color: #333;
      border: 1px solid #333;
      vertical-align: middle;
      margin: 0;
      height: 35px;
      width: 50px;
      box-sizing: border-box;

      i{
        font-size: 25px;
        width: 30px;
        line-height: 34px;
      }

    }

    .buttons{
      position: absolute;
      top: 0;
      right: 0;
      vertical-align: top;
      font-size: 0;
      line-height: 0;

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

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

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

        }

        .button_recover_from_trash{
          position: relative;
          display: inline-block;
          z-index: 100;
          height: 35px;
          line-height: 35px;
          font-size: 16px;
          font-weight: 500;
          cursor: pointer;
          background-color: #A52133;

          color: white;
          border: 1px solid gray;
          border-top: 0;
          transition: 0.3s all ease;
          vertical-align: top;
          box-sizing: border-box;

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

          }

        }

      }

      .auxiliar_button_addupdate{
        position: relative;
        display: inline-block;
        z-index: 100;
        height: 35px;
        line-height: 35px;
        padding: 0 20px;
        margin: 5px 5px 0 0;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        background-color: #A52133;
        color: white;
        border: 1px solid gray;
        border-top: 0;
        transition: 0.3s all ease;
        vertical-align: top;
        box-sizing: border-box;

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

        &.hidded{
          display: none !important;
        }

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

      }

      .button_pdf{
        position: relative;
        display: inline-block;
        z-index: 100;
        height: 35px;
        line-height: 35px;
        padding: 0 20px;
        margin: 5px 5px 0 0;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;

        background-color: #A52133;
        color: white;
        border: 1px solid gray;
        border-top: 0;
        transition: 0.2s all ease;
        vertical-align: top;
        box-sizing: border-box;
        text-decoration: none;

        &:hover{

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

      .button_edit_entity{
        position: relative;
        display: inline-block;
        z-index: 100;
        height: 35px;
        line-height: 35px;
        padding: 0 20px;
        margin: 5px 5px 0 0;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        background-color: #A52133;
        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);
        }

      }

      .inform_changes_advice{
        position: relative;
        display: none;
        opacity: 0;
        z-index: 100;
        height: 35px;
        line-height: 35px;
        padding: 0 20px;
        margin: 5px 5px 0 0;
        font-size: 16px;
        font-weight: 500;
        cursor: default;
        color: var(--balter-color-secondary-1-2);
        border-top: 0;
        transition: 0.3s all ease;
        vertical-align: top;
        box-sizing: border-box;
        text-decoration: none;

        &.active{
          display: inline-block;
        }

      }
    }

    .indicator__person_sage_icon{
      position: relative;
      display: inline-block;
      width: 60px;
      height: 30px;
      line-height: 50px;
      vertical-align: middle;
      border: 1px solid #004a06;
      border-radius: 5px;
      padding: 0 5px;
      box-sizing: border-box;
      background-color: #f3fff3;
      margin-right: 5px;
    }*/

    .exercise_selector_container{
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      text-align: right;
      border: 1px solid var(--balter-primary-color);
      border-left: 2px solid var(--balter-primary-color);
      background-color: #f4f6ff;
      line-height: 34px;
      padding: 0 10px;
      margin: 0 0 0 10px;
      border-radius: 3px;

      @media only screen and (max-width: 960px){

      }

      .exercise_title{
        font-weight: 500;
        font-size: 18px;
        line-height: 20px;
        color: var(--balter-primary-color);
        margin-right: 10px;

        @media only screen and (max-width: 960px){
          display: none;
        }
      }

      .exercise_selector{
        font-weight: 500;
        font-size: 18px;
        line-height: 24px;
        border-radius: 0;
        border: 1px solid var(--balter-primary-color);
        cursor: pointer;
        padding: 0 10px;

        @media only screen and (max-width: 960px){
          font-size: 18px;
        }
      }

      .button_admin_sync_sage_part{
        position: relative;
        display: inline-block;
        left: 0;
        top: 0;
        width: 25px;
        height: 40px;
        vertical-align: top;
        cursor: pointer;
        box-sizing: border-box;

        @media only screen and (max-width: 960px){

        }

        .button_content{
          position: absolute;
          left: 0;
          top: 0;
          width: 25px;
          height: 40px;

          @media only screen and (max-width: 960px){

          }

          svg{
            position: relative;
            width: 25px;
            height: 20px;
            margin-top: 12px;
            /* filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5)); */
            transition: 0.5s transform ease;

            @media only screen and (max-width: 960px){
              margin-top: 10px;
            }
          }
        }

        img{
          position: absolute;
          top: calc(50% - 15px);
          left: calc(50% - 15px);
          vertical-align: top;
          display: none;
          width: 22px;
          height: 22px;
          margin: 3px 5px;
          display: none;
        }

        &:hover{

          .button_content{
            svg{
              transform: rotate(180deg);
            }
          }

        }

        &.active{

          img{
            display: block;
          }
        }

        &.error{
          background-color: var(--balter-color-primary-1);
        }

      }

    }

    .actions{

      @media only screen and (max-width: 767px){
        position: relative !important;
      }
    }



    @media only screen and (max-width: 767px){
      padding: 5px;
      text-align: center;

      .pageicon,
      .avatar{
        display: block;
        margin: 0 auto;
      }

    }

    @media only screen and (max-width: 600px){
      font-size: 20px;
      min-height: 35px;
      line-height: 25px;
    }
    @media only screen and (max-width: 500px){
      font-size: 18px;
      min-height: 30px;
      line-height: 20px;
    }

  }

  .mini_widgets_container{
    position: relative;
    margin-top: -30px;
    z-index: 72;
    height: 30px;
    text-align: right;
    float: right;

    @media only screen and (max-width: 767px){
      margin-top: 5px;
      z-index: 91;
    }

    .mini_widget{
      position: relative;
      display: inline-block;
      text-align: left;
      line-height: 20px;
      padding: 5px 10px;
      font-size: 16px;


      &.pdfs_quantity{
        position: relative;
        display: inline-block;
        line-height: 20px;
        padding: 10px;
      }

      &.free_plan_counter{
        background-color: rgba(255, 213, 0, 0.3);
      }

      .button__contract_plan{
        border-color: #2b9b24;
        background-color: white;

        img{
          background-color: transparent;
          width: 31px;
          position: absolute;
          top: -10px;
          left: -3px;
          padding: 0;
        }

        .text{
          padding: 0;
          padding-left: 26px;
          font-size: 14px;
          line-height: 19px;
          color: green;
        }
      }

    }

    &.self_row{
      margin-top: 0;
      float: none;
    }

  }

  .h1_description{
    position: relative;
    z-index: 70;
    width: 100%;
    min-height: 30px;
    color: #333;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 20px;
    box-sizing: border-box;
    text-align: left;
    background-color: white;
    margin: -6px 0 7px 0;
    vertical-align: top;
    /* box-shadow: 1px 1px 6px -2px rgba(0,0,0,.1); */
  }

  .top_buttons{
    box-shadow: 1px 1px 3px rgba(6, 6, 6, 0.2);

    .area_left{
      @media only screen and (max-width: 767px){
        display: none !important; /* quitar breadcrumbs en mobile */
      }
    }

  }

  .inform_footer_buttons,
  .top_buttons,
  .bottom_buttons{
    position: relative;
    background-color: white;
    padding: 5px 0 0 5px;

    .area_left{
      position: relative;
      float: left;

      .action_buttons{

        .button_return{
          border: 0;
          margin-right: 3px;
          background-color: #f4f6ff;
        }

        .button_container{
          margin-right: 3px;

          .button_interface{
            border: 0;
            background-color: white;

            img{
              height: 20px;
              width: auto;
              padding: 5px 3px 5px 0;
            }

            .text{
              font-size: 14px;
              line-height: 30px;
              margin: 0;
              min-width: auto;
              color: var(--balter-primary-color);
            }
          }
        }

        .decor_arrow_dir{
          border: 0;
          margin-right: 3px;
        }
      }

    }

    .area_right{
      position: relative;
      float: right;
      text-align: right;
    }

    .button_container{
      margin-bottom: 5px;
    }

  }

  .bottom_buttons{
    z-index: 80;
    position: fixed;
    bottom: 30px;
    right: 30px;
    box-shadow: 1px 1px 3px #060606;
    background-color: rgba(255, 255, 255, 0.5);

  }

  .button_edit_entity_absolute_pos{
    position: relative;
    width: 28px;
    padding: 0 !important;

    .button_edit_entity{
      position: absolute;
      right: 3px;
      top: 3px;
      background-color: white;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 1px solid black;
      border-radius: 3px;
      opacity: 0.7;
      transition: 0.3s opacity ease;


      &.button_table{
        display: inline-block;
        text-align: center;
        /* border: 0; */
        padding: 0;
        /* border-radius: 0; */
        margin: 0;
      }

      &:hover{
        opacity: 1;
      }
    }

  }

  .intable_button_absolute_pos{
    position: relative;
    width: 40px;
    padding: 0 !important;

    .intable_button{
      position: absolute;
      right: 3px;
      top: 3px;
      color: var(--balter-blue-1);
      width: 34px;
      height: 20px;
      line-height: 20px;
      display: inline-block;
      text-align: center;
      border-radius: 3px;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      transition: 0.3s color ease;

      &:hover{
        color: var(--balter-blue-1-dark);
        background-color: #f7f7f7;
      }

      &.button_delete{
        color: var(--balter-color-primary-4);
        opacity: 0.7;

        &:hover{
          color: var(--balter-color-primary-3);
          background-color: #f7f7f7;
          opacity: 1;
        }
      }
    }

  }

  .mass_actions_over_all{
    text-align: center;

    input[type="checkbox"]{
      transform: scale(1.2);
    }
  }

  .col_mass_actions{
    position: relative;
    padding: 0 !important;
    text-align: center;
    width: 30px;

    input[type="checkbox"]{
      transform: scale(1.2);
    }

  }

  .button_see_entity_absolute_pos,
  .button_pdf_entity_absolute_pos{
    position: relative;
    width: 60px;
    padding: 0 !important;

    .button_see_entity,
    .button_pdf_entity{
      position: absolute;
      display: block;
      right: 3px;
      top: 3px;
      background-color: #f7f7f7;
      color: #333;
      text-align: center;
      width: 54px;
      height: 20px;
      line-height: 20px;
      cursor: pointer;


      &.button_table{
        display: inline-block;
        text-align: center;
        border: 0;
        padding: 0;
        border-radius: 0;
        margin: 0;
      }
    }

  }

  .column_id_rb{
    /* position: relative; */
    width: 60px;
    height: 26px;
    line-height: 26px;
    padding: 0 0 0 10px !important;
    text-align: left;

  }

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

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

  .zone_2{
    position: relative;
    display: inline-block;
    width: calc(100% - 610px);
    box-sizing: border-box;
    vertical-align: top;

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

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

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

  .zone_1_2{
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: calc(100% - 400px);
    box-sizing: border-box;
    vertical-align: top;

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

  .zone_25{
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: calc(25% - 10px);
    box-sizing: border-box;
    vertical-align: top;

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

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

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

  .zone_half{
    position: relative;
    display: block;
    float: left;
    margin: 0 5px;
    width: calc(50% - 10px);
    box-sizing: border-box;
    vertical-align: top;

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

  .zone_40{
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: calc(40% - 10px);
    box-sizing: border-box;
    vertical-align: top;

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

  }

  .zone_60{
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: calc(60% - 10px);
    box-sizing: border-box;
    vertical-align: top;

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

  .user_avatar{

    img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }

  }

  .capabilities_container{
    position: relative;
    box-sizing: border-box;
    margin-top: 20px;

    .title{
      position: relative;
      box-sizing: border-box;
      font-size: 20px;
      line-height: 20px;

    }

    .capability_group{
      position: relative;
      box-sizing: border-box;
      /* display: inline-block; */
      display: block;
      float: left;
      width: 32%;
      vertical-align: top;
      background-color: #f9f9f9;
      border: 1px solid lightgrey;
      padding: 5px;
      margin: 1% 1% 0 0;

      .title{
        position: relative;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 16px;
        font-weight: 600;
      }

      .subtitle{
        position: relative;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 14px;
        margin-top: 10px;
        padding: 5px 0 5px 3px;
        background-color: white;
        border-radius: 5px 0 0 0;
      }

      label{
        position: relative;
        box-sizing: border-box;
        display: block;
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 3px;
        cursor: pointer;
        border-top: 1px solid white;
        border-left: 1px solid white;

        &.checked{
          background-color: #f2ffeb;
        }

      }

    }

  }

  /* .button_addupdate{ */
  /* position: absolute; */
  /* z-index: 100; */
  /* height: 30px; */
  /* width: 150px; */
  /* line-height: 30px; */
  /* top: 0; */
  /* right: 10px; */
  /* font-size: 14px; */
  /* cursor: pointer; */
  /* background-color: #A52133; */
  /* color: white; */
  /* border-radius: 0 0 4px 4px; */
  /* border: 1px solid gray; */
  /* border-top: 0; */
  /* transition: 0.2s all ease; */
  /* display: none; */

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

  /* &.hidded{ */
  /* display: none; */
  /* } */
  /* } */

  .button_see_budget_pdf{
    position: absolute;
    z-index: 100;
    height: 30px;
    width: 150px;
    line-height: 30px;
    top: 0;
    right: 210px;
    cursor: pointer;
    background-color: #efefef;
    color: #5f5f5f;
    border-radius: 0 0 4px 4px;
    text-align: center;
    border: 1px solid gray;
    border-top: 0;
    transition: 0.3s all ease;

    &.hidded{
      display: none;
    }

  }

  hr{
    margin: 5px 20px 5px 20px;
    border: 1px solid #fafafa;
  }

  .generic_container{
    position: relative;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 20px;
    font-size: 0;
    line-height: 0;

    .generic_container_body{
      font-size: 14px;
      line-height: 20px;
    }

    .generic_help_description{
      font-size: 16px;
      line-height: 20px;
    }

    .button_edit_entity{
      font-size: 14px;
      line-height: 20px;
    }

  }

  .generic_subcontainer{
    position: relative;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    margin-top: 5px;
    /* padding: 0 0 20px 20px; */
    /* padding: 0 0 10px 0; */
    font-size: 0;
    line-height: 0;
    /* border: 4px solid #ffe9e9; */
    border: 8px solid #fcffff;
    box-shadow: 1px 1px 6px -2px rgb(0 0 0 / 30%);

    .subcontainer_title{
      position: relative;
      font-size: 18px;
      line-height: 24px;
      margin-top: 20px;
      text-align: center;
    }

    .subcontainer_content{
      position: relative;
      font-size: 16px;
      line-height: 20px;
      margin-left: 20px;
      width: calc( 100% - 40px );
    }

    &.hidded{
      display: none !important;
    }

    &:first-child{
      margin-top: 0;
    }

  }

  .budget_container_primary,
  .budget_concept_container_primary,
  .budget_structure_container,
  .budget_concepts_agregator,
  .budget_container_aditional,{
    position: relative;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 10px 0 10px 10px;

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


  .budget_concepts_preview{
    position: fixed;
    z-index: 200;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    padding: 10px;
    transition: 0.8s all ease;

    .budget_concepts_preview_content{
      position: relative;
      background-color: white;
      height: 100%;
      box-sizing: border-box;

      .container_title{
        position: relative;
        z-index: 10;
        padding: 5px 10px;
        text-align: center;

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

      .fa-times{
        position: absolute;
        z-index: 20;
        top: 0;
        right: 0;
        cursor: pointer;
        display: block;
        margin: 0 0 auto auto;
        height: 30px;
        width: 30px;
        line-height: 30px;
        padding: 0;
        text-align: center;
        font-size: 22px;
        background-color: #e7e7e7;
      }

      iframe{
        position: relative;
        z-index: 10;
        margin: 10px;
        width: calc( 100% - 20px );
        height: calc( 100vh - 90px );
        box-sizing: border-box;

      }

    }

    &.hidded{
      left: -150vw;
      opacity: 0;

    }
  }

  .standart_tab{
    position: relative;
    background-color: white;
    box-sizing: border-box;
    margin: 5px 5px 0 5px;
    padding: 10px 0 10px 10px;

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


  .spoilers_group{

  }

  .person_container_role_selector{
    position: relative;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 20px 0 20px 20px;
    font-size: 14px;
    line-height: 20px;

    .container_title{
      display: inline-block;

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

  }

  .sino_switcher{
    position: relative;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 41px;
    height: 30px;
    border-right: 0;
    font-size: 0;
    line-height: 0;
    text-align: center;

    .option{
      position: absolute;
      display: block;
      left: 0;
      top: 0;
      width: 100%;
      line-height: 30px;
      font-size: 14px;
      text-align: center;
      transition: 0.4s all ease;
      color: #333;
      cursor: pointer;
      opacity: 0;
      overflow: hidden;
      z-index: 2;

      i{
        transition: 0.3s all ease;
      }

      &.option_si{
        background-color: rgb(231, 255, 198);

        i{
          transform: rotate(100deg);
        }
      }

      &.option_no{
        background-color: #f1f1f1;

        i{
          transform: rotate(-100deg);
        }
      }

      &.active{
        opacity: 1;
        z-index: 3;

        i{
          transition: 0.3s all ease;
          transform: rotate(0);
        }
      }
    }

  }

  .companies_inner_list_container{
    position: relative;
    width: 100%;

    .companies_inner_list_seeker{
      position: relative;
      width: 100%;
      margin: 0 0 5px 0;
      border: 1px solid lightgrey;
      border-radius: 4px;
      padding: 3px;
    }

    .companies_inner_list{
      position: relative;
      width: 100%;
      box-sizing: border-box;
      max-height: 300px;
      overflow-y: auto;

      .company{
        position: relative;
        /* border: 1px solid lightgrey; */
        vertical-align: top;
        box-sizing: border-box;
        font-size: 0;
        line-height: 0;
        margin-top: -1px;
        border: 1px solid lightgrey;
        cursor: pointer;

        &.hidded{
          display: none;
        }

        .avatar{
          position: relative;
          display: inline-block;
          text-align: center;
          vertical-align: top;
          box-sizing: border-box;
          border: 1px solid lightgrey;
          border-left: 0;
          border-right: 0;

          img{
            width: 40px;
            vertical-align: top;
          }
        }

        .second{
          position: relative;
          display: inline-block;
          width: calc(100% - 43px);
          cursor: pointer;

        }

        .id{
          position: relative;
          display: inline-block;
          line-height: 30px;
          font-size: 14px;
          text-align: left;
          vertical-align: top;
          padding-left: 5px;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

        .full_name{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 30px;
          padding: 0 5px;
          text-align: left;
          vertical-align: top;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

        .sino_switcher{
          position: relative;
          display: inline-block;
          vertical-align: top;
          box-sizing: border-box;
          left: 0;
          top: 0;
          width: 41px;
          height: 30px;
          border: 1px solid lightgrey;
          border-right: 0;

          .option{
            line-height: 30px;
            font-size: 16px;

            &.option_no{
              background-color: #f1f1f1;
            }
          }

        }
      }

    }

  }

  .persons_inner_list_container{
    position: relative;
    width: 100%;

    .persons_inner_list_seeker{
      position: relative;
      width: 100%;
      margin: 0 0 5px 0;
      border: 1px solid lightgrey;
      border-radius: 4px;
      padding: 3px;

      &.hidded{
        display: none;
      }

    }

    .persons_inner_list_selected{

      &.hidded{
        display: none;
      }

      .selected_person{
        position: relative;
        vertical-align: top;
        box-sizing: border-box;
        font-size: 0;
        line-height: 0;
        border: 1px solid lightgrey;
        border-bottom: 0;

        .avatar{
          position: relative;
          display: inline-block;
          text-align: center;
          vertical-align: top;
          box-sizing: border-box;
          border: 1px solid lightgrey;
          border-left: 0;
          border-right: 0;

          img{
            width: 40px;
            vertical-align: top;
          }
        }

        .id{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 40px;
          text-align: left;
          vertical-align: top;
          padding-left: 5px;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

        .full_name{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 40px;
          padding: 0 5px;
          text-align: left;
          vertical-align: top;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

      }

      .no_selected_persons{
        position: relative;
        display: block;
        font-size: 14px;
        line-height: 40px;
        padding: 0 5px;
        text-align: left;
        vertical-align: top;
        box-sizing: border-box;
        border: 1px solid #f5f5f5;
      }

    }

    .persons_inner_list{
      position: relative;
      width: 100%;
      box-sizing: border-box;
      max-height: 500px;
      overflow-y: auto;

      &.hidded{
        display: none;
      }

      .person{
        position: relative;
        /* border: 1px solid lightgrey; */
        vertical-align: top;
        box-sizing: border-box;
        font-size: 0;
        line-height: 0;
        /* margin-top: -1px; */
        border: 1px solid lightgrey;
        border-bottom: 0;
        cursor: pointer;

        &:last-child{
          border-bottom: 1px solid lightgrey;
        }

        &.hidded{
          display: none;
        }

        .avatar{
          position: relative;
          display: inline-block;
          text-align: center;
          vertical-align: top;
          box-sizing: border-box;
          /* border: 1px solid lightgrey; */
          border-left: 0;
          border-right: 0;

          img{
            width: 30px;
            vertical-align: top;
          }
        }

        .second{
          position: relative;
          display: inline-block;
          width: calc(100% - 43px);
          cursor: pointer;

        }

        .id{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 30px;
          text-align: left;
          vertical-align: top;
          padding-left: 5px;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

        .full_name{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 30px;
          padding: 0 5px;
          text-align: left;
          vertical-align: top;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

      }

    }

    .show_persons_selector{
      padding: 1px;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 0 0 4px 4px;
      cursor: pointer;
      border-top: 1px solid #f2f2f2;
    }

  }


  .services_inner_list_container{
    position: relative;
    width: 100%;

    .services_inner_list_seeker{
      position: relative;
      width: 100%;
      margin: 0 0 5px 0;
      border: 1px solid lightgrey;
      border-radius: 4px;
      padding: 3px;

      &.hidded{
        display: none;
      }

    }

    .services_inner_list_selected{

      &.hidded{
        display: none;
      }

      .selected_service{
        position: relative;
        vertical-align: top;
        box-sizing: border-box;
        font-size: 0;
        line-height: 0;
        border: 1px solid lightgrey;
        border-bottom: 0;

        .avatar{
          position: relative;
          display: inline-block;
          text-align: center;
          vertical-align: top;
          box-sizing: border-box;
          border: 1px solid lightgrey;
          border-left: 0;
          border-right: 0;

          img{
            width: 40px;
            vertical-align: top;
          }
        }

        .id{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 40px;
          text-align: left;
          vertical-align: top;
          padding-left: 5px;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

        .full_name{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 40px;
          padding: 0 5px;
          text-align: left;
          vertical-align: top;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

      }

      .no_selected_services{
        position: relative;
        display: block;
        font-size: 14px;
        line-height: 40px;
        padding: 0 5px;
        text-align: left;
        vertical-align: top;
        box-sizing: border-box;
        border: 1px solid #f5f5f5;
      }

    }

    .services_inner_list{
      position: relative;
      width: 100%;
      box-sizing: border-box;
      max-height: 500px;
      overflow-y: auto;

      &.hidded{
        display: none;
      }

      .service{
        position: relative;
        /* border: 1px solid lightgrey; */
        vertical-align: top;
        box-sizing: border-box;
        font-size: 0;
        line-height: 0;
        /* margin-top: -1px; */
        border: 1px solid lightgrey;
        border-bottom: 0;
        cursor: pointer;

        &:last-child{
          border-bottom: 1px solid lightgrey;
        }

        &.hidded{
          display: none;
        }

        .avatar{
          position: relative;
          display: inline-block;
          text-align: center;
          vertical-align: top;
          box-sizing: border-box;
          border: 1px solid lightgrey;
          border-left: 0;
          border-right: 0;

          img{
            width: 40px;
            vertical-align: top;
          }
        }

        .second{
          position: relative;
          display: inline-block;
          width: calc(100% - 43px);
          cursor: pointer;

        }

        .id{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 30px;
          text-align: left;
          vertical-align: top;
          padding-left: 5px;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

        .full_name{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 30px;
          padding: 0 5px;
          text-align: left;
          vertical-align: top;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

      }

    }

    .show_services_selector{
      padding: 1px;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 0 0 4px 4px;
      cursor: pointer;
      border-top: 1px solid #f2f2f2;
    }

  }

  .elements_inner_list_container{
    position: relative;
    width: 100%;

    .button__close{
      position: relative;
      display: none;
      width: 40px;
      margin: 0 0 10px auto;
      font-size: 14px;
      line-height: 16px;
      cursor: pointer;
      background-color: var(--balter-primary-color);
      color: white;
      text-align: center;
      border-radius: 3px;
      opacity: 0.6;
      transition: 0.2s opacity ease;

      &:hover{
        opacity: 1;
      }
    }

    .elements_inner_list_seeker{
      position: relative;
      display: none;
      width: 100%;
      margin: 0 0 5px 0;
      border: 1px solid lightgrey;
      border-radius: 4px;
      padding: 3px;

    }

    .elements_inner_list_selected{

      .no_selected_elements{
        position: relative;
        display: block;
        font-size: 14px;
        line-height: 40px;
        padding: 0 5px;
        text-align: left;
        vertical-align: top;
        box-sizing: border-box;
        border: 1px solid #f5f5f5;
      }

    }

    .elements_inner_list{
      position: relative;
      width: 100%;
      box-sizing: border-box;
      max-height: 900px;
      overflow-y: auto;

    }

    .show_elements_selector{
      text-align: center;
      border-radius: 0 0 4px 4px;
      position: relative;
      box-sizing: border-box;
      padding: 4px;
      margin: 0;
      background-color: var(--balter-background-1);
      border: 1px solid var(--balter-primary-color);
      border-left: 5px solid var(--balter-gray-1);
      color: var(--balter-primary-color);
      text-decoration: none;
      cursor: pointer;
      user-select: none;
    }

    .element{
      position: relative;
      display: none;
      /* border: 1px solid lightgrey; */
      vertical-align: top;
      box-sizing: border-box;
      font-size: 0;
      line-height: 0;
      /* margin-top: -1px; */
      border: 1px solid lightgrey;
      border-bottom: 0;
      cursor: pointer;

      &.active{
        display: block;
      }

      &.hidded{
        display: none !important;
      }

      &:last-child{
        border-bottom: 1px solid lightgrey;
      }

      .sino_switcher{
        display: none;
      }

      .second{
        position: relative;
        display: inline-block;
        width: calc(100% - 43px);
        cursor: default;
      }

      .avatar{
        position: relative;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        box-sizing: border-box;
        border: 1px solid lightgrey;
        border-left: 0;
        border-right: 0;

        img{
          width: 40px;
          vertical-align: top;
        }
      }

      .id{
        position: relative;
        display: inline-block;
        font-size: 14px;
        line-height: 30px;
        text-align: left;
        vertical-align: top;
        padding-left: 5px;
        box-sizing: border-box;

      }

      .full_name{
        position: relative;
        display: inline-block;
        font-size: 14px;
        line-height: 30px;
        padding: 0 5px;
        text-align: left;
        vertical-align: top;
        box-sizing: border-box;

        &.found{
          background-color: rgba(255, 255, 0, 0.2);
        }
      }

      .element_content{
        position: relative;
        text-align: left;
        vertical-align: top;
        box-sizing: border-box;

        div{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 30px;
          padding: 0 5px;
        }

      }

      &.element_services{

        .group{
          position: relative;
          background-color: #dfdfdf;
          line-height: 24px;
          margin-left: 3px;
          border-radius: 0 4px 4px 0;
        }

        .title{
          position: relative;
        }

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

      }

      &.element_first_contact_responsibles,
      &.element_executors,
      &.element_overseers{

        .sino_switcher{
          height: 60px;

          .option{
            line-height: 60px;
          }
        }

        .avatar{
          position: relative;
          display: inline-block;
          text-align: center;
          vertical-align: top;
          box-sizing: border-box;
          border: 0;
          border-left: 0;
          border-right: 0;
          padding: 0;

          img{
            width: 60px;
            vertical-align: top;
          }
        }

        .id{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 30px;
          text-align: left;
          vertical-align: top;
          padding-left: 5px;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

        .ename{
          position: relative;
          display: inline-block;
          font-size: 14px;
          line-height: 30px;
          padding: 0 5px;
          text-align: left;
          vertical-align: top;
          box-sizing: border-box;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

      }

    }

    &.active{

      .element{
        display: block;

        .sino_switcher{
          display: inline-block;
          cursor: pointer;
        }

        .second{
          cursor: pointer;
        }

      }

      .button__close{
        display: block;
      }

      .elements_inner_list_seeker{
        display: block;
      }

    }

  }

  .persons_multiselector{
    position: relative;

    .persons_multiselector_filter{
      position: relative;
      width: 100%;
      border-radius: 4px 4px 0 0;
      border: 1px solid #e9e9e9;
    }

    .persons_selector{
      position: relative;
      overflow-y: auto;
      height: 50vh;

      .person{
        position: relative;
        font-size: 0;
        line-height: 0;
        box-sizing: border-box;
        cursor: pointer;
        margin: 2px 0;
        border: 1px solid #e9e9e9;
        border-radius: 4px;
        overflow: hidden;

        .avatar{
          position: relative;
          width: 20px;
          height: 20px;
          box-sizing: border-box;
          display: inline-block;
          vertical-align: top;

          img{
            position: relative;
            width: 100%;
            height: 100%;
            vertical-align: top;

          }
        }

        .id{
          position: relative;
          display: inline-block;
          width: 60px;
          height: 20px;
          box-sizing: border-box;
          font-size: 12px;
          line-height: 20px;
          vertical-align: top;
          padding-left: 5px;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }


        .full_name{
          position: relative;
          display: inline-block;
          width: calc(100% - 90px);
          box-sizing: border-box;
          font-size: 14px;
          line-height: 20px;
          height: 20px;
          vertical-align: top;
          padding-left: 5px;
          overflow: hidden;

          &.found{
            background-color: rgba(255, 255, 0, 0.2);
          }
        }

        &.hidded{
          display: none;
        }

        &.active{
          background-color: #f2fff0;
        }

      }

    }

    .persons_selected_container{
      position: relative;
      display: none;
      padding: 5px;
      background-color: #e9e9e9;
      border-radius: 4px;

      .persons_selected{
        font-size: 12px;
        line-height: 20px;
        font-weight: 500;
      }

      &.not_empty{
        display: block;
      }

    }

  }

  /*&#interface_person{
    direction: rtl;

    @media only screen and (max-width: 500px){
      direction: ltr;
    }
  }*/

}

/* -----END GLOBAL NAV RELATED------------------------------------------------------------------------------------------- */
/* -----CONTENT---------------------------------------------------------------------------------------------------------- */

#content_container{
  position: absolute;
  z-index: 90;
  top: 35px;
  right: 0;
  width: 100%;
  padding-left: var(--balter-nav-menu-width);
  /* width: calc(100% - 260px); */
  height: calc(100vh - 65px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  transition: 0.4s all ease;
  /* background-color: var(--balter-background-1); */
  /* background-color: #F7F7F7; */
  background: rgba(240, 240, 240, 1);
  /* background: linear-gradient(314deg, rgba(194, 194, 194, 1) 0%, rgba(240, 240, 240, 1) 40%); */


  @media only screen and (max-width: 960px){
    position: relative;
    top: 0;
    padding-left: 0;
    height: auto;
    padding-bottom: 25px;
  }

  #content{
    position: relative;
    width: 100%;
    min-height: calc( 100vh - 120px );
    box-sizing: border-box;
    transition: 0.4s all ease;
    /* background-image: url(/library/images/logo_company_5o.png); */
    /* background-position: calc(100% - 30px) 100%; */
    /* background-repeat: no-repeat; */
    /* background-size: 200px; */

    #content_tabs{
      position: relative;
      max-width: 1024px;
      margin: 10px auto;
      display: grid;
      grid-auto-flow: row dense;
      grid-gap: 5px;
      grid-template-columns: repeat( 4, 1fr );
      user-select: none;
      line-height: 0;
      font-size: 0;

      .content_tab{
        position: relative;
        display: inline-block;
        border-radius: 0;
        border: 1px solid var(--balter-primary-color);
        border-left-width: 3px;
        border-top-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
        font-size: 16px;
        line-height: 25px;
        padding: 5px 10px 5px 50px;
        cursor: pointer;
        box-sizing: border-box;
        color: #333;
        vertical-align: top;
        text-shadow: 2px 5px 1px rgba(232, 232, 232, 0.43);
        text-align: left;
        transition: 0.2s all ease;
        /* margin: 1px 5px 1px 0; */
        /* min-width: calc(14% - 10px); */
        /* background-color: #f4f6ff; */
        background-color: rgba(255, 255, 255, 0.4);
        font-weight: 600;

        i,
        img{
          position: absolute;
          display: block;
          left: 7px;
          top: 2px;
          width: 30px;
          height: 30px;
          vertical-align: text-bottom;
          transition: 0.3s all ease;
        }

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

        &:hover{
          border-color: var(--balter-primary-color);
          background-color: rgba(255, 255, 255, 0.6);
        }

        &.active{
          /* border-bottom: 1px solid transparent; */
          cursor: default;
          text-shadow: 0 0 0 rgba(0, 0, 0, 0);
          color: black;
          /* background-color: #A52133; */
          background-color: #f4f6ff;
          /* box-shadow: 1px 1px 6px -2px rgb(0 0 0 / 30%); */
          border-color: var(--balter-primary-color);
          background-color: rgba(255, 255, 255, 1);

          img,
          i{
            /* color: var(--balter-color-secondary-1-2); */
            color: white;
            filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
            left: 2px;
            top: -5px;
            width: 35px;
            height: 35px;
          }
        }

        &.disabled_by_person_type{
          display: none !important;
          transform: scale(0);
        }

        &.hidded{
          display: none !important;
        }

        &.rows_2{
          grid-column: span 2;
        }

        &.rows_3{
          grid-column: span 3;
        }

        &.rows_4{
          grid-column: span 4;
        }

      }

      &.hidded{
        display: none;
      }
    }

    #content_structure{
      position: relative;
      font-size: 14px;
      line-height: 24px;

      .tab{
        position: relative;
        display: none;
        /* margin-bottom: 10px; */

        .intab_title{
          background-color: white;
          margin: 0 0 10px 0;
          padding: 10px;
          font-size: 18px;
          line-height: 30px;
          /* border-left: 4px solid #ffe9e9; */
          border-left: 4px solid #6ba553;
          font-weight: 700;

          img{
            position: relative;
            display: inline-block;
            color: #333;
            height: 30px;
            margin-right: 10px;
            text-align: center;
            vertical-align: top;
            background-color: white;
            padding: 0;
            border-radius: 0 4px 4px 0;
            overflow: hidden;
          }

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

        &.active{
          display: block;
          /* border-left: 5px solid #e7e7e7; */
          /* background-color: #fff; */
          /* padding: 10px; */
        }

        &.disabled_by_person_type{
          display: none !important;
          transform: scale(0);
        }
      }

    }

    &.scrolled{

      .button_see_budget_pdf{
        position: fixed;
        top: 5px;
        right: 160px;
        height: 35px;
        line-height: 35px;
        border-radius: 4px;
        border: 0;
      }


    }

  }

}