* {
  box-sizing: border-box;
}

.max_500 {
	width:100%;
	max-width:607px;
	}

.select2.select2-container {
  width: 100% !important;
}
.select2.select2-container {
  width: 100%;
}

.select2-results__options li{
	margin:0;
	}

.select2-selection--single {
  height: 44px;
}


.upImgFild {
	margin-bottom:30px;
	}


.fildArea{
	float:left;
	width:100%;
}

.fildArea ul{
	float:left;
	width:100%;
	}

.fildArea ul li input.input1 {
  line-height: 38px;
  /*min-width: 215px;*/
  width: 100%;
  max-width: 607px;
  padding: 0 10px;
}
.fildArea ul li input.input1[disabled] {
  background: #ececec;
}


.fildArea ul li{
	float:left;
	width:auto;
	list-style:none;
	/*margin:9px 24px 0 0;*/
  padding: 10px 0px;
  margin-left: 0;
  width: 25%;
  width: 50%;
  clear: both;
  box-sizing: border-box;
	}
  .fildArea ul li:nth-child(4n+1) {
    clear: both;

  }
.fildArea ul li input{
	float:left;
	width:auto;
}

.fildArea ul li input.radioBtn ,
.fildArea ul li input.checkBtn {
  float: left;
  margin: 4px 5px 0 0;
}


.tbArea::before {
  clear: both;
  content: "";
  display: table;
  height: 14px;
  width: 100%;
}

.tbArea::after {
  clear: both;
  content: "";
  display: table;
}

.fildArea .tbArea {
  display: block;
  float: none;
  margin: 10px 0;
  max-width: 606px;
  width: 100%;
}
.fildArea ul li.textFild {
  /*margin: 0 25px 0 0 ;*/
}
.fildArea ul li.hr {
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding: 16px 0px 10px 0px;
  margin: 15px 0 20px 0;
}
.submitBtn {
  /*background: #8048a8;
  border: medium none;
  box-shadow: none;
  color: #fff;*/
  margin-top: 15px;
  padding: 13px 50px;
  /*text-shadow: inherit;*/
}

/*.submitBtn:hover {
  background: #333;
  }*/

 #file {
  display:none;
}

.file__drop {
  background: #f2f2f2 none repeat scroll 0 0;
  border: 3px dashed #c2c2c2;
  display: block;
  height: 100px;
  line-height: 100px;
  max-width: 200px;
  text-align: center;
}

.fileDrop {
  background: #f2f2f2 none repeat scroll 0 0;
  border: 3px dashed #c2c2c2;
  display: block;
  /*height: 100px;*/
  left: 0;
  line-height: 100px;
  /*position: absolute;*/
  text-align: center;
  top: 0;
  width: 100%;
  padding: 0;

  width: 250px;
}

.dragInner {
  float: left;
  margin-right: 20px;
  position: relative;
  /*width: 250px;*/
}

.dragArea input {
  height: 106px;
  opacity: 0;
  width: 100%;

  position: absolute;

}

.clear {
	clear:both;
	}

.rmvBtn {
  font-size: 22px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  right: -50px;
  text-align: center;
  top: 0;
  width: 30px;
  display:none;
}

.rmvBtn a {
	display:block;
	color:#fff;
	background: rgba(0, 0, 0, 0.4);

	}
.dragArea {
  margin-bottom: 10px;
  float: left;
  width: 100%;
}

form label.inline {
  padding: 0 12px 0 0;
  display: inline;
  background: none;
  font-weight: normal;
  text-shadow: none;
  border: none;
  float: left;
}
form label.label {
  padding: 0 0 8px 0;
  background: none;
  text-shadow: none;
  border: none;
  color: #000;
  font-size: 13px;
}
form ul li.hr label {
  background: none;
  text-shadow: none;
  border: none;
  font-size: 22px;
  padding: 0 0 0px 0;
  font-weight: normal;
  color: #9c9a9a;
}

span.error {
  display: block;
  color: red;
  padding: 4px 0;
  font-size: 14px;
}
span.success {
  display: block;
  color: green;
  padding: 4px 0;
  font-size: 16px;
}

.modal-wrapper {
  position: fixed;
  background: rgba(0,0,0,0.6);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
}
.modal-wrapper .modal {
  position: relative;
  max-width: 600px;
  margin: 50px auto 0 auto;
  background: #ffffff;
  padding: 15px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.modal-wrapper .modal span.remove {
  position:  absolute;
  display: inline-block;
  right: -12px;
  top: -12px;
  padding: 3px 13px 7px 13px;
  color: #ffffff;
  background: #a5a5a5;
  font-size: 18px;
  cursor: pointer;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.modal-wrapper .modal span.remove:hover {
  background: red;
}
.modal-wrapper .modal .modal-inner {
  height: 500px;
  overflow: hidden;
  overflow-y: scroll;
}
.modal-wrapper .modal .modal-inner label {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 6px;
  background: #efefef;
  color: #888888;
  padding: 2px 10px;
}
.modal-wrapper .modal .modal-inner label.hding {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #6d6d6d;
  border-bottom: 2px solid #afafaf;
  margin-bottom: 10px;
  padding: 8px 10px 6px 10px;
}
.modal-wrapper .modal .modal-inner .val {
  font-size: 14px;
  padding: 8px 0 10px 20px;
}
.modal-wrapper .modal .modal-inner p {
  color: #6d6d6d;
  font-size: 16px;
  margin: 10px 0;
}

form ul li.artist_user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: left;
  margin: 0 0 12px 0;
}
form ul li.artist_user label.label {
  flex: 0 0 130px;
  padding: 0 12px 0 0;
}
form ul li.artist_user select {
  flex: 0 1 420px;
}
/* Select2 replaces the <select> with its own container and sets an inline
   width:100%, which would push the field onto a second line. flex-basis wins
   over width for a flex item, so sizing the container here keeps the row
   on one line. */
form ul li.artist_user .select2 {
  flex: 0 1 420px;
}
form ul li.artist_user select.select2-hidden-accessible {
  flex: 0 0 0;
}
/* Checkbox rows: box on the left, caption to its right. */
form ul li.artist_user.checkbox-row label.label {
  flex: 0 0 130px;
}
form ul li.artist_user.checkbox-row input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0 8px 0 0;
  order: 1;
}
form ul li.artist_user.checkbox-row span.caption {
  flex: 0 1 auto;
  order: 2;
}
form ul li.artist_user label.error {
  flex-basis: 100%;
  margin: 4px 0 0 130px;
  color: red;
  font-size: 13px;
}

/* /upload — label left, field right ------------------------------------------
   This page stays on the legacy-forms body mode and its original float grid;
   these rules only undo the `.legacy-forms form label { display:block }` stack
   for its rows. Scoped to .upload_forms so no other legacy-forms page moves. */
.upload_forms .fildArea ul li,
.upload_forms .fildArea ul li > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* These rows already carry `clear:both`, so the inherited `width:50%` puts
   them one-per-line anyway while leaving too little room for a 180px label
   plus a 420px field — which would wrap the field onto a second line. */
.upload_forms .fildArea ul li {
  width: 100%;
}
.upload_forms .fildArea ul li > div {
  width: 100%;
}
.upload_forms .fildArea ul li > label.label,
.upload_forms .fildArea ul li > div > label.label {
  flex: 0 0 180px;
  padding: 0 12px 0 0;
}
.upload_forms .fildArea ul li > input.input1,
.upload_forms .fildArea ul li > textarea,
.upload_forms .fildArea ul li > select,
.upload_forms .fildArea ul li > .select2,
.upload_forms .fildArea ul li > div > .full {
  flex: 0 1 420px;
}
/* Checkbox rows wrap the box and its caption in the label itself, so that
   label is the whole row rather than the left column. Indent it to line up
   with the field column. */
.upload_forms .fildArea ul li > label.label:has(input.checkBtn) {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  margin-left: 180px;
  padding: 0;
}
.upload_forms .fildArea ul li label.label > input.checkBtn {
  flex: 0 0 auto;
  float: none;
  margin: 0 8px 0 0;
}

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

  .max_500 {
  max-width: none;
  }

  .upload_forms .fildArea ul li > label.label,
  .upload_forms .fildArea ul li > div > label.label {
    flex-basis: 100%;
    padding: 0 0 4px 0;
  }
  .upload_forms .fildArea ul li > input.input1,
  .upload_forms .fildArea ul li > textarea,
  .upload_forms .fildArea ul li > select,
  .upload_forms .fildArea ul li > .select2,
  .upload_forms .fildArea ul li > div > .full {
    flex-basis: 100%;
  }
  .upload_forms .fildArea ul li > label.label:has(input.checkBtn) {
    margin-left: 0;
  }

  .fildArea ul li{
    width: 100%;
  }
  .fildArea ul li input.input1 {
    max-width: none;
  }
  .fildArea .tbArea {
    max-width: none;
  }

  form ul li.artist_user label.label {
    flex-basis: 100%;
    padding: 0 0 4px 0;
  }
  form ul li.artist_user .select2 {
    flex-basis: 100%;
  }
  /* Checkbox rows stay on one line even on narrow screens. */
  form ul li.artist_user.checkbox-row label.label {
    flex-basis: 100%;
  }
  form ul li.artist_user label.error {
    margin-left: 0;
  }

}