/* zFlex/flexButtons.css */

/*<common controls>*/
.flex-button,
.dxucBrowseButton_Material {
  border-radius: 3px;
  text-decoration: none !important;
  font-size: 14px;
  font-family: 'Roboto';
  font-weight: normal;
  transition: background-color 0.25s ease 0s;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  outline: none;
  /* text align middle for link button */
  text-align: center;
  box-sizing: border-box;
  /*display: table-cell !important;*/ /* Fix hidden buttons */
  vertical-align: middle;
  /* /text align middle for link button */
}

.dxucBrowseButton_Material {
  margin-left: 10px;
}

.flex-button-input input {
  border-radius: 3px;
  text-decoration: none;
  font-size: 14px;
  font-family: 'Roboto';
  font-weight: normal;
  transition: background-color 0.25s ease 0s;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  outline: none;
}

.flex-button-inline {
  border-radius: 3px;
  text-decoration: none !important;
  font-size: 14px;
  font-family: 'Roboto';
  font-weight: normal;
  transition: background-color 0.25s ease 0s;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  outline: none;
  /* text align middle for link button */
  text-align: center;
  box-sizing: border-box;
  display: inline-block !important;
  vertical-align: middle;
  /* /text align middle for link button */
}

.button-height {
  height: 34px !important;
}
/*<default button>*/
.flex-button-gray,
.dxucBrowseButton_Material {
  color: #373737 !important;
  background-color: #e1e1e1 !important;
  border: solid 1px #888888 !important;
  padding: 7px 25px 8px 25px !important;
}

  .flex-button-gray:hover,
  .dxucBrowseButtonHover_Material {
    background-color: #d1d1d1 !important;
  }

  .flex-button-gray:active,
  .dxucBrowseButtonPressed_Material {
    background-color: #bbbbbb !important;
  }

.flex-button-gray-narrow {
  padding: 4px 20px 5px 20px !important;
}
/* upload browse button */
.dxucBrowseButtonHover_Material a {
  color: #373737 !important;
}

.dxucBrowseButtonPressed_Material a {
  color: #373737 !important;
}

.dxucBrowseButton_Material.dxbf a {
  border: 0;
}
/* disabled Gray button */
.flex-button-gray[disabled="disabled"],
.flex-button-gray:hover[disabled="disabled"],
.flex-button-gray:active[disabled="disabled"] {
  opacity: 0.6 !important;
  background-color: #e1e1e1 !important;
}
/*</default button>*/
/*<input button orange>*/
.flex-button-orange {
  color: #fff !important;
  border: solid 0px #CC4F3A !important;
  padding: 8px 25px 9px 25px;
  margin-right: 10px;
}

.flex-button-orange-narrow {
  padding: 5px 20px 6px 20px !important;
}

.flex-button-orange-big {
  padding: 15px 20px 16px 20px !important;
}
/* disabled Orange button */
.flex-button-orange[disabled="disabled"],
.flex-button-orange:hover[disabled="disabled"],
.flex-button-orange:active[disabled="disabled"] {
  opacity: 0.6;
  background-color: #ba6a5d;
}
/*</input button orange>*/
/*<input button green>*/
.flex-button-green {
  color: #fff !important;
  background-color: #74c233 !important;
  border: solid 0px #74c233 !important;
  padding: 8px 25px 9px 25px !important;
}

  .flex-button-green:hover {
    background-color: #5fa029 !important;
  }

  .flex-button-green:active {
    background-color: #45761c !important;
  }

.flex-button-green-narrow {
  padding: 5px 20px 6px 20px !important;
}
/*</input button green>*/
/*</common controls>*/

/*<input controls>*/
/*<default button>*/
.flex-button-input-gray input {
  color: #373737;
  background-color: #e1e1e1;
  border: solid 1px #888888;
  padding: 7px 25px 8px 25px !important;
}

  .flex-button-input-gray input:hover {
    background-color: #d1d1d1;
  }

  .flex-button-input-gray input:active {
    background-color: #b3b3b3;
  }

.flex-button-input-gray-narrow input {
  padding: 4px 20px 5px 20px !important;
}
/*</default button>*/
/*<input button orange>*/
.flex-button-input-orange input {
  color: #fff;
  background-color: #cc4f3a;
  border: solid 0px #cc4f3a;
  padding: 8px 25px 9px 25px !important;
}

  .flex-button-input-orange input:hover {
    background-color: #db5c46;
  }

  .flex-button-input-orange input:active {
    background-color: #bd412f;
  }

.flex-button-input-orange-narrow input {
  padding: 5px 20px 6px 20px !important;
}
/*</input button orange>*/
/*<input button green>*/
.flex-button-input-green input {
  color: #fff;
  background-color: #74c233;
  border: solid 0px #74c233;
  padding: 8px 25px 9px 25px !important;
}

  .flex-button-input-green input:hover {
    background-color: #5fa029;
  }

  .flex-button-input-green input:active {
    background-color: #45761c;
  }

.flex-button-input-green-narrow input {
  padding: 5px 20px 6px 20px !important;
}
/*</input button green>*/
/*</input controls>*/

/* menu buttons */
.flex-button-orange a,
.flex-button-gray a,
.flex-button-green a {
  padding: 0 !important;
}

.flex-button-orange a,
.flex-button-green a {
  color: #FFFFFF !important;
}

.flex-button-gray a {
  color: #373737 !important;
}
/* /menu buttons */