/** This file list all CSS classes used by Episerver Forms.

    Class names are structured and named in BEM methodology (Block, Element, Modifier) so you can easily see the overview.
        - CSS classes and their structure defined here are used by Form Core JavaScript heavily.
        - Please keep the structure (parent-child block-element relation) and default class names as is.

    This file is intended to be re-styled by 3rd developers. or in their site template (E.g.: AlloyMVC).
        - Default styling contain only minimal styling-rule for Episerver Forms and its build-in elements.
        - Default styling is applied for both Forms rendering in ViewMode and authoring in EditView.
        - Styling rules can be modified freely.
*/
.EPiServerForms {
  /* light blue */
  /*predefined color for selected item, elapsed progress*/
  /*to indicate FormStep, FormHidden in EditView*/
  /************* UTILITY CLASSES ***********/
  /************* BUILDIN ELEMENTS ***********/
  /******************************************/
  /*************** EDIT VIEW ****************/
  /******************************************/
}
.EPiServerForms .Form__Description {
  margin-bottom: 1rem;
}
.EPiServerForms .FormImageSubmitButton {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.EPiServerForms .Form__Status .Form__Status__Message {
  display: block;
  padding: 1rem;
  margin: 1rem 0;
}
.EPiServerForms .Form__Status .Form__Success__Message {
  background-color: #99e9ce;
  color: #000c40;
}
.EPiServerForms .Form__Status .Form__Warning__Message {
  background-color: #fed2d2;
  color: #c00;
}
.EPiServerForms .Form__Status .Form__Readonly__Message {
  display: block;
  padding: 1rem;
  margin: 1rem 0;
  background-color: #fed2d2;
  color: #c00;
}
.EPiServerForms .Form__Status .hide {
  display: none;
}
.EPiServerForms .Form__Success .Form__SubmissionSuccess__Message {
  display: block;
  padding: 1rem;
  margin: 1rem 0;
}
.EPiServerForms .Form__Success .Form__Success__Message {
  background-color: #000c40;
  color: #333;
}
.EPiServerForms .Form__Success .hide {
  display: none;
}
.EPiServerForms .Form__NavigationBar .Form__NavigationBar__Action {
  display: inline-block;
  padding: inherit;
  vertical-align: middle;
  text-align: center;
  border: 1px solid rgba(41, 128, 189, 0.5);
  border-radius: 4px;
  font-size: inherit;
  height: 2em;
  width: 10em;
  max-width: 10rem;
  color: initial;
  background-image: linear-gradient(to top, #fff, #e6e6e6);
  background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
  background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
}
.EPiServerForms .Form__NavigationBar .Form__NavigationBar__Action:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.EPiServerForms .Form__NavigationBar .Form__NavigationBar__ProgressBar {
  display: inline-block;
  border: 1px solid rgba(41, 128, 189, 0.5);
  vertical-align: middle;
  width: 33%;
}
.EPiServerForms .Form__NavigationBar .Form__NavigationBar__ProgressBar .Form__NavigationBar__ProgressBar--Progress {
  /*display: none;*/
  /*turn on this style to hide visual progress bar*/
  background-color: rgba(41, 128, 189, 0.5);
  width: 0%;
  /* Will be adjusted by JavaScript */
  height: 1rem;
}
.EPiServerForms .Form__NavigationBar .Form__NavigationBar__ProgressBar .Form__NavigationBar__ProgressBar--Text {
  display: none;
  /*turn off this style to show text "Page 1/4" of progress bar*/
}
.EPiServerForms .FormStep .FormStep__Description {
  margin-bottom: 1rem;
}
.EPiServerForms .Form__Element {
  margin: 0 0 1.5rem 0;
}
.EPiServerForms .Form__Element .Form__Element__Caption {
  display: block;
  min-width: 15%;
  vertical-align: top;
}
.EPiServerForms .Form__Element .Form__Element__ValidationError {
  background: #c00;
  color: white;
  display: inline-block;
  word-wrap: break-word;
  padding: 0.25rem 0.5rem;
  margin: 0;
  min-width: 200px;
}
.EPiServerForms .ValidationRequired .Form__Element__Caption:after {
  content: " *";
}
.EPiServerForms .ValidationFail {
  color: #e9322d;
}
.EPiServerForms .ValidationFail input,
.EPiServerForms .ValidationFail textarea,
.EPiServerForms .ValidationFail select {
  border-color: #e9322d;
}
.EPiServerForms .ValidationFail legend {
  color: #e9322d;
}
.EPiServerForms .hide {
  display: none;
}
.EPiServerForms .visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  /* added line */
}
.EPiServerForms .FormSubmitButton {
  color: white;
  background: #000c40;
}
.EPiServerForms .FormSubmitButton:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.EPiServerForms .FormSubmitButton:focus {
  background: #333d66;
  color: white;
  outline: 3px dashed rgba(41, 128, 189, 0.5);
}
.EPiServerForms .FormSubmitButton:hover {
  background: #333d66;
  color: white;
}
.EPiServerForms .FormResetButton {
  width: auto;
  border: none;
  font-size: 1rem;
  margin-left: 1rem;
  color: #000c40;
}
.EPiServerForms .FormResetButton:focus {
  outline: 3px dashed rgba(41, 128, 189, 0.5);
}
.EPiServerForms .FormFileUpload .FormFileUpload__Input {
  font-size: 1rem;
}
.EPiServerForms .FormCaptcha .FormTextbox__Input {
  width: 350px;
}
.EPiServerForms .FormCaptcha .FormCaptcha__Image {
  display: block;
  margin-bottom: 0.5rem;
}
.EPiServerForms .FormCaptcha .FormCaptcha__Refresh {
  font-size: 0.9em;
  min-height: 1rem;
  margin-bottom: 0.5rem;
  border: none;
  color: #000c40;
  background: url('../Images/gfx/icon_refresh.svg') no-repeat;
  padding: 0 2rem;
}
.EPiServerForms .FormChoice .FormChoice__Input:focus + .FormChoice__Label {
  border: dashed rgba(41, 128, 189, 0.5) 1px;
}
.EPiServerForms .FormChoice .FormChoice__Label {
  display: inline-block;
  font-weight: normal;
}
.EPiServerForms .FormChoice--Image {
  /*img stand next to checked image will be bordered*/
}
.EPiServerForms .FormChoice--Image .FormChoice--Image__Item {
  /* for image choice items, display as a flow (inline-block), we want max 2 items in one row, with a small margin */
  display: inline-block;
  max-width: 40%;
  text-align: center;
  /* image caption will be center */
  margin: 0.5rem;
}
.EPiServerForms .FormChoice--Image .FormChoice__Input:checked ~ img {
  border: 1px solid rgba(41, 128, 189, 0.5);
}
.EPiServerForms .FormChoice--Image .FormChoice__Input:focus ~ img {
  border: 1px dashed rgba(41, 128, 189, 0.5);
}
.EPiServerForms .FormRange .FormRange__Wrapper {
  display: inline-block;
  width: 80%;
}
.EPiServerForms .FormRange .FormRange__Wrapper .FormRange__Slider__Wrapper {
  display: flex;
}
.EPiServerForms .FormRange .FormRange__Wrapper .FormRange__Input {
  display: inline;
  flex: 1;
}
.EPiServerForms .FormRange .FormRange__Wrapper .FormRange__Input:focus {
  outline: 1px dashed rgba(41, 128, 189, 0.5);
}
.EPiServerForms .FormRange .FormRange__Wrapper .FormRange__Slider__Button {
  font-size: 14px;
  border: none;
  cursor: pointer;
  background-color: #000c40;
  color: white;
  margin: 10px;
  font-weight: bold;
  flex: 0.1;
}
.EPiServerForms .FormRange .FormRange__Wrapper .FormRange__Slider__Button__Disable {
  background-color: #ccd3d2;
  cursor: default;
}
.EPiServerForms .FormRange .FormRange__Wrapper .FormRange__Min {
  flex: 0.1;
  line-height: 54px;
  text-align: center;
}
.EPiServerForms .FormRange .FormRange__Wrapper .FormRange__Max {
  flex: 0.1;
  line-height: 54px;
  text-align: center;
}
.EPiServerForms .FormRange .FormRange__Wrapper .FormRange__Output__Wrapper {
  position: relative;
  display: block;
  text-align: center;
}
.EPiServerForms .hidden {
  display: none !important;
}
.EPiServerForms .EditView__InvisibleElement.FormStep {
  display: block;
  border-radius: 4px;
  border-color: rgba(184, 192, 197, 0.6);
  background-color: rgba(184, 192, 197, 0.6);
  color: #000;
  padding: 0.2rem;
  font-family: helvetica, arial, sans-serif;
  box-shadow: 3px 3px 5px #ccc;
  /*text-align: center;*/
}
.EPiServerForms .EditView__InvisibleElement.FormStep .FormStep__Warning {
  color: #c00;
  background-color: #fed2d2;
  display: block;
  word-wrap: break-word;
}
.EPiServerForms .EditView__InvisibleElement.FormHidden {
  display: inline-block;
  border-radius: 4px;
  border: 1.5px outset rgba(184, 192, 197, 0.6);
  padding: 0.2rem 1rem;
  min-width: 18rem;
  /*text-align: center;*/
}
.EPiServerForms .Warning {
  color: #c00;
  background-color: #fed2d2;
  display: block;
  word-wrap: break-word;
}
.EPiServerForms .Form__Warning {
  color: #c00;
  background-color: #fed2d2;
  display: block;
  word-wrap: break-word;
}