.formbg {
  margin:2em auto;
  width: 100%;
  max-width: 800px;
  background: white;
  border-radius: 4px;
}

.formbg2 {
  margin:2em auto;
  max-width: 700px;
  border-radius: 4px;
}

.formbg .pageForm {
  padding: 2em 2.5em;
}

.pageForm h2 {
  font-size: 1.5em;
  line-height: 1.8em;
  color: #1a1f36;
  margin: 0 0 1em 0;
  padding: 0;
}

.field {
  padding-bottom: 1.2em;
}

.field label {
  display: flex;
  align-items: center;
  padding-bottom: 0.5em;
}

.field div:not(.ms-drop) {
  display: flex;
  flex-wrap: wrap;
}

.field div label {
  margin: 0.3em;
}

.field input:not([type="radio"]):not([type="checkbox"]), .field select{
  font-size: 1em;
  line-height: 1.4em;
  padding: 8px 16px;
  width: 100%;
  min-height: 45px;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  border: 1px solid #e5e5e5;
}

.field input[type="checkbox"] {
  width: 1.15em; 
  height: 1.15em; 
}

.field > a {
  display: flex;
  align-items: center;
}

.field a img {
  height: 1.5em;
}

.pageForm .imgs input[type="file"] {
  display: none;
}

.pageForm .imgs .img {
   position: relative;
}

.deleteIcon .deleteImg {
  width: 100%;
  height: 100%;
}

.deleteIcon {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  padding: 0.25em;
  background: #dc3741;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
}

.pageForm .imgs {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  grid-column-gap: 1em;
  grid-row-gap: 0;
  margin-bottom: 0;
}

.pageForm .imgs .uploadImg {
  width: 100%;
}

.fieldLink {
  display: flex;
  justify-content: space-around;
}

.fieldLink a {
  color: #77767b;
}

.pageForm .field input[type="submit"] {
    background-color: rgb(84, 105, 212);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgb(84, 105, 212) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1em;
}

.field input:disabled, .pageForm input[type="submit"]:disabled {
  background-color: #c0bfbc;
}

.errorlist {
  margin: 0;
}

.errorlist li {
  color: #dc3741;
}

.field table td {
  padding: 0.3em  0.5em;
}

.field table tr:first-child {
  background: #428bca;
}

.field table tr:first-child th {
  color: #fff;
  padding: 0.3em 0.5em;
}

.field table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 5px;
}

.field tr:nth-child(odd) {
  background: #efefef;
}

.field .img img {
  width: 8em;
}

.field .img input[type="file"] {
  display: none;
}

.btns {
  display: flex;
  justify-content: space-around;
}

.btns > a {
  background-color: rgb(84, 105, 212);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3em 0.7em;
  border-radius: 5px;
}

.ms-parent {
  min-width: 10em;
}

.field .ms-drop.bottom {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
}

.field .ms-drop.bottom ul {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 50%;
  overflow: auto;
  border: none;
  border-radius: 0.3em;
  background: #FFF;
  box-shadow: 0 1em 3em rgba(0,0,0,0.4);
  padding: 1em 1.5em;
}

@media screen and (max-width: 430px) {
  .formbg .pageForm {
    padding: 2em 1em;
  }
}

