/*
 field.less
*/

.fancy-field {
  height: @field-height;
  //padding: @field-padding;
  .fancy-field-label {
    color: @field-label-color;
    float: @field-label-float;
    padding: @field-label-padding;
    white-space: nowrap;
    font-weight: 700;
  }

  .fancy-field-text {
    float: @field-text-float;
    position: relative;
  }

    .fancy-field-text-input {
      border: @field-input-border;
      background: @field-input-background;
      padding: 7px;
      margin: 0;
      height: @field-input-height;
      min-width: 34px;
      color: @field-input-color;
      font: normal 11px/16px tahoma, arial, sans-serif;
      &:focus {
        border-color: @field-input-border-color-focus;
        outline: 0;
      }
    }
}

.fancy-field-not-valid {
  .fancy-field-error {
    display: block;
  }
    
  input, textarea {
    background: #ffe9e9 !important;
    border: 1px solid #f9d3d5 !important;
  }
}

.fancy-combo.fancy-field-not-valid input {
  background: initial !important;
  border: initial !important;
}

.fancy-combo.fancy-field-not-valid .fancy-combo-input-container {
  background: #ffe9e9!important;
  border: 1px solid #f9d3d5!important;
}

.fancy-field-blank-err {
    input, textarea {
        //border: 1px solid #cf4c35 !important;
        background: #ffe9e9 !important;
        border: 1px solid #f9d3d5 !important;
    } 
    .fancy-field-error {
        display: block;
    }
}

.fancy-field-disabled {
  opacity: .3;

  .fancy-field-label {
    cursor: default;
  }

  input {
    cursor: default;
  }

  .fancy-field-checkbox-input {
    cursor: default;
  }

  .fancy-field-text {
    cursor: default;
  }

  div.fancy-field-text {
    cursor: default;
  }

  .fancy-field-picker-button {
    cursor: default;
  }

  .fancy-field-spin-up {
    cursor: default;
  }

  .fancy-field-spin-down {
    cursor: default;
  }

  .fancy-field-radio-input {
    cursor: default;
  }

  .fancy-combo-dropdown-button {
    cursor: default;
  }

  .fancy-button {
    cursor: default;
  }

  .fancy-field-text-input {
    cursor: default;
  }

  .fancy-textarea-text-input {
    cursor: default;
  }
}

.fancy-field-error {
    display: none;
    color: @field-color-error;
    font-size: 10px;
    margin-left: 5px;
}

.fancy-combo.fancy-field-blank-err {
    table {
        border: 1px solid #f9d3d5 !important;
    } 
    input {
        border-width: 0 !important;
    }
}

.fancy-field-html {
    padding: 8px 0 0 8px;
}

.fancy-field-input-label {
  float: left;
  padding: 7px 10px 0 0;
  text-align: right;
  color: #555;
  font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;
  font-size: 11px;
  font-weight: normal;
  cursor: pointer;
}

.fancy-field-search {
  .fancy-field-text {
    background: #FFF;
  }

  input.fancy-field-text-input {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cpath%20fill%3D%22%23068dc7%22%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: 3px;
    padding-left: 28px;
  }
}

.fancy-field-button .fancy-button {
  margin-top: 0;
}

.fancy-field-spin {
  width: 23px;
  height: 33px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  display: none;

  .fancy-field-spin-up {
    height: 14px;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%23088ec7%22%20d%3D%22M136.5%20185.1l116%20117.8c4.7%204.7%204.7%2012.3%200%2017l-7.1%207.1c-4.7%204.7-12.3%204.7-17%200L128%20224.7%2027.6%20326.9c-4.7%204.7-12.3%204.7-17%200l-7.1-7.1c-4.7-4.7-4.7-12.3%200-17l116-117.8c4.7-4.6%2012.3-4.6%2017%20.1z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: -4px -7px;
    &:hover {
      background-color: rgba(0,159,238,.07);
    }
    &:active {
      box-shadow: inset 0 1px 3px rgba(0,0,0,.125);
    }
  }

  .fancy-field-spin-down {
    height: 13px;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2230%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%23088ec7%22%20d%3D%22M119.5%20326.9L3.5%20209.1c-4.7-4.7-4.7-12.3%200-17l7.1-7.1c4.7-4.7%2012.3-4.7%2017%200L128%20287.3l100.4-102.2c4.7-4.7%2012.3-4.7%2017%200l7.1%207.1c4.7%204.7%204.7%2012.3%200%2017L136.5%20327c-4.7%204.6-12.3%204.6-17-.1z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: -2px -9px;
    &:hover {
      background-color: rgba(0,159,238,.07);
    }
    &:active {
      box-shadow: inset 0 1px 3px rgba(0,0,0,.125);
    }
  }
}

.fancy-form .fancy-field-spin .fancy-field-spin-down {
  height: 14px;
}

.fancy-grid-editors {
  .fancy-field-spin {
    top: 1px;
    .fancy-field-spin-up {
      height: 17px;
    }
  }
}

.fancy-field-search-params-link {
  position: absolute;
  right:8px;
  top: 0;
  color: gray;
  font-weight: normal;
  font: 400 11px/16px tahoma,arial,sans-serif;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%224%22%20viewBox%3D%22944%201152%208%204%22%3E%3Cpath%20fill%3D%22%2392A0B1%22%20d%3D%22M945.2%201152.2C944.9%201152%20944.5%201152%20944.3%201152.3%20944.1%201152.6%20944.1%201153%20944.4%201153.2L947.6%201155.8C947.8%201156%20948.2%201156%20948.4%201155.8L951.6%201153.2C951.9%201153%20951.9%201152.6%20951.7%201152.3%20951.5%201152%20951.1%201152%20950.8%201152.2L948%201154.5%20945.2%201152.2Z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 13px;
  padding: 4px 14px 2px 2px;
  line-height: 19px;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}

.fancy-field-search-paramed-empty {
  .fancy-field-search-params-link {
    &:hover {
      text-decoration: none;
    }
  }
}

.fancy-field-search-paramed {
  input.fancy-field-text-input {
    padding-right: 90px;
  }
}

.fancy-field-search-list {
  background: white;
  display: none;
  z-index: 4;
  .fancy-field {
    padding-top: 5px !important;
    width: inherit !important;
    cursor: pointer;
    &:hover {
      background: #E0E5E9;
    }
  }
}

.fancy-field-pass-tip {
  position: absolute;
  right: 4px;
  top: 3px;
  width: 36px;
  height: 23px;
  border-radius: 20px;
  background: #F7F7F7;
  cursor: pointer;
  line-height: 22px;
  text-align: center;
  font-size: 15px;
  color: #048DC8;
}