@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
body {
  background: #f9f9f9;
  padding: 20px 0; }
  body * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Open Sans'; }
  body #main_content {
    max-width: 1400px;
    margin: 0 auto; }
  body #form, body .field-preview {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px; }
    body #form img, body .field-preview img {
      display: block;
      margin: 40px auto; 
      max-width: 100%; }
    body #form label, body .field-preview label {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 5px; }
      body #form label.error, body .field-preview label.error {
        color: #d9534f;
        margin: 4px 0 0 2px; }
    body #form button, body .field-preview button {
      background: #1bc459;
      border: 3px solid rgba(0,0,0,0.3);
      color: #FFF !important;
      font-weight: 600;
      padding: 10px 30px !important;
      cursor: pointer;
      text-transform: uppercase; }
    #form button.decline, body .field-preview button.decline {
      background: #cd1f00 !important;
    }
    body #form input[type="text"], body .field-preview input[type="text"], input[type="email"], input[type="number"] {
      height: 42px !important; line-height: 100% !important;}
    body #form input[type="file"], body .field-preview input[type="file"] {
      height: 42px;
      line-height: 32px; }
    body #form input[type="date"], body .field-preview input[type="date"] {
      height: 42px; }
    body #form textarea, body .field-preview textarea {
      padding: 10px !important; }
    body #form select, body .field-preview select {
      padding: 5px !important;
      height: 42px !important; }
    body #form hr, body .field-preview hr {
      margin: 20px 0 !important;
      border-color: #dadada !important; }
    body #form h1, body #form h2, body #form h3, body #form h4, body #form h5, body .field-preview h1, body .field-preview h2, body .field-preview h3, body .field-preview h4, body .field-preview h5 {
      text-align: center;
      font-weight: 600; }
    body #form h1, body .field-preview h1 {
      font-size: 48px;
      margin: 20px 0; }
    body #form h2, body .field-preview h2 {
      font-size: 40px;
      margin: 16px 0; }
    body #form h3, body .field-preview h3 {
      font-size: 34px;
      margin: 12px 0; }
    body #form h4, body .field-preview h4 {
      font-size: 30px;
      margin: 8px 0; }
    body #form h5, body .field-preview h5 {
      font-size: 26px;
      margin: 4px 0; }
    body #form p, body .field-preview p {
      line-height: 1.6;
      font-size: 15px; }
    body #form .checkable, body .field-preview .checkable {
      font-weight: 400;
      display: inline-block;
      margin: 5px 0;
      padding-left: 34px !important; }
    body #form input[type="radio"] + .checkable::after, body .field-preview input[type="radio"] + .checkable::after {
      left: 4px !important;
      height: 14px !important;
      width: 14px !important;
      -webkit-transform: translate(0, -50%) !important;
      -ms-transform: translate(0, -50%) !important;
      transform: translate(0, -50%) !important; }
    body #form input[type="radio"] + .checkable::before, body .field-preview input[type="radio"] + .checkable::before {
      height: 18px !important;
      width: 18px !important;
      border-width: 2px !important; }
    body #form input[type="checkbox"] + .checkable::after, body .field-preview input[type="checkbox"] + .checkable::after {
      top: calc(50% + 1px) !important;
      left: 1.5px !important;
      -webkit-transform: translate(0, -50%) !important;
      -ms-transform: translate(0, -50%) !important;
      transform: translate(0, -50%) !important;
      content: "\2716" !important; }
    body #form input[type="checkbox"] + .checkable::before, body .field-preview input[type="checkbox"] + .checkable::before {
      border-width: 2px !important; }
    #uploadImage{
      opacity: 0;
      height: 0;
    }
.settings-window-bg {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9; }
  .settings-window-bg .settings-window {
    z-index: 10;
    width: 600px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #FFF;
    border: 1px solid #a0a0a0;
    padding: 20px; }
    .settings-window-bg .settings-window .close-settings {
      text-align: center;
      line-height: 28px;
      font-size: 18px;
      color: #FFF;
      display: block;
      width: 30px;
      height: 30px;
      top: 0;
      right: 0;
      background: #de4949;
      border: 1px solid rgba(0, 0, 0, 0.2);
      cursor: pointer;
      position: absolute; }
      .settings-window-bg .settings-window .close-settings::before {
        content: "\2716"; }
    .settings-window-bg .settings-window select {
      display: block;
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #CCC;
      border-radius: 2px; }
    .settings-window-bg .settings-window label {
      font-size: 14px;
      margin-bottom: 5px;
      display: block; }
    .settings-window-bg .settings-window input {
      height: 42px;
      padding: 10px; }
    .settings-window-bg .settings-window input, .settings-window-bg .settings-window textarea {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      max-height: 200px;
      min-height: 42px;
      margin-bottom: 10px;
      border: 1px solid #CCC;
      border-radius: 2px;
      padding: 10px; }
    .settings-window-bg .settings-window .clear {
      clear: both;
      width: 100%; }
    #form button{
      margin-right: 0;
    }
    .settings-window-bg .settings-window button {
      padding: 10px 20px;
      outline: none;
      border: 3px solid rgba(0, 0, 0, 0.15);
      color: #FFF;
      border-radius: 3px;
      margin-right: 5px; }
      .settings-window-bg .settings-window button#saveDataBtn {
        background: #16a64b;
        float: right; }
      .settings-window-bg .settings-window button#publishDataBtn {
        background: #4cadd2;
        float: right; }
      .settings-window-bg .settings-window button#clearDataBtn {
        background: #c33131;
        margin-right: 0; }

@media screen and (max-width: 768px) {
  #form .f-row {
    display: block; }
  .f-render-column {
    width: 100% !important;
    margin: 10px 0; } }