File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>.latepoint-w {
  .os-form-w {
    background-color: #fff;
    padding: 30px;
    margin: 20px 0px;
  }
  .os-form-group {
    margin-bottom: 15px!important;
    position: relative;

    // Select &amp; text/textarea fields
    &amp;.os-form-select-group,
    &amp;.os-form-textfield-group{
      .os-form-control,
      input.os-form-control {
        position: relative!important;
        display: block!important;
        box-shadow: none!important;
        border: 1px solid $form-input-border-color!important;
        padding: 12px 10px 12px 10px!important;
        border-radius: $form-controls-border-radius!important;
        background-color: #fff!important;
        width: 100%;
        color: $form-controls-color;
        line-height: 1.2;
        font-size: $font-size-base!important;
        font-weight: $body-font-weight-normal!important;
        transition: all 0.2s ease;
        height: auto;
        margin: 0px;
        &amp;:focus {
          background-color: #fff!important;
          border-color: #5779ef!important;
          outline: none;
          box-shadow: none;
        }
        &amp;.os-invalid {
          border-color: $form-controls-border-color-error!important;
          box-shadow: 0 0 0 3px rgba($form-controls-border-color-error, 0.1)!important;
        }
        &amp;.os-shake {
          animation: latepointShake 1s ease-in-out;
        }
      }
      textarea,
      input[type=&quot;number&quot;],
      input[type=&quot;email&quot;],
      input[type=&quot;password&quot;],
      input[type=&quot;text&quot;],
      input[type=&quot;tel&quot;] {
        -webkit-appearance: none;
      }
      &amp;.os-invalid {
        label {
          color: #d56e67!important;
        }
        .os-form-control,
        input.os-form-control {
          border-color: $form-input-border-color-invalid!important;
          &amp;::placeholder {
            color: #e38888 !important;
          }
          &amp;:focus {
            border-color: #c10505 !important;
          }
        }
      }
    }

    // Select field
    &amp;.os-form-select-group {
      label {
        display: block!important;
        font-size: $font-size-base;
        margin: 0px;
      }
      select.os-form-control {
        height: $form-controls-select-height!important;
      }
    }

    // Multiselect field
    &amp;.os-form-multiselect-group {
      &gt; label {
        font-size: $body-font-size-s;
        font-weight: $body-font-weight-bold;
        margin-bottom: 10px!important;
      }
      .os-form-group {
        margin-bottom: 3px!important;
        label {
          font-size: $body-font-size-xs;
        }
      }
    }

    // Checkbox field
    &amp;.os-form-checkbox-group {
      label {
        padding: 0px;
        border-radius: $form-controls-border-radius;
        display: flex;
        gap: 8px;
        align-items: center;
        color: $body-color;
        vertical-align: middle;
        margin: 0px;
        font-weight: $body-font-weight-bold;
        font-size: $font-size-base;
        cursor: pointer;
        &amp;:hover {
        }
        input.os-form-checkbox {
          display: inline-block;
          vertical-align: middle;
          border-radius: $form-controls-border-radius;
          box-shadow: none;
          border-color: #aaa;
        }
        a {
          text-decoration: underline;
        }
      }
    }

    // Text/Textarea fields
    &amp;.os-form-textfield-group{
      label {
        display: block;
        margin-bottom: 1px;
        line-height: 1.1;
        cursor: default;
        font-size: floor($font-size-base * 0.8)!important;
        color: #959aae!important;
        font-weight: $body-font-weight-normal!important;
        position: absolute!important;
        top: 5px;
        left: 10px;
        z-index: 2;
        opacity: 0;
        transform: translateY(-3px);
        transition: all 0.2s ease;
      }
      .os-form-control,
      input.os-form-control {
        input.os-form-control {
          z-index: 1;
        }
        &amp;::placeholder {
          color: #959aae;
        }
        &amp;.os-framed-field {
          height: floor(($font-size-base * 1.3) + 12px + 12px + 4px)!important;
          &amp;.invalid, &amp;.braintree-hosted-fields-invalid {
            border-color: #f16161!important;
          }
        }
      }
      &amp;.has-value:not(.os-form-group-simple) {
        label {
          opacity: 1!important;
          transform: translateY(0)!important;
        }
        textarea.os-form-control,
        input.os-form-control {
          padding: 19px 10px 5px 10px!important;
        }
      }
    }


    &amp;.os-form-group-simple {
      &amp;.os-form-textfield-group {
        label {
          opacity: 1;
          transform: none!important;
          position: relative!important;
          top: auto;
          left: auto;
          margin-bottom: 4px!important;
          font-size: $body-font-size-s!important;
        }
        .os-form-control {
          background-color: #fff;
          border: 1px solid $form-input-border-color;
          padding: 12px 8px 12px!important;
          &amp;:focus {
            border-color: $brand-primary;
          }
        }
        &amp;.os-form-phonefield-group {
          border: none;
          .os-form-control {
            padding: 13px 8px 13px 0!important;
          }
          .lp_iti {
            background-color: #fff;
            border: 1px solid $form-input-border-color;
            align-items: stretch;
            border-radius: 6px;
            gap: 5px;
            &amp;:has(input:focus){
              border-color: $brand-primary;
            }
            .lp_iti__selected-flag {
              padding: 0;
              padding-left: 12px;
            }
            .lp_iti__flag-container {
              display: flex;
            }
          }
        }
      }

      &amp;.os-form-select-group {
        label {
          margin-bottom: 3px;
        }
        .os-form-control {
          background-color: #fff;
          border: 1px solid #d6d6e1;
          &amp;:focus {
            border-color: $brand-primary;
          }
          &amp;:hover {
            border-color: $brand-primary;
          }
          &amp;.size-small {
            padding-top: 5px !important;
            padding-bottom: 5px !important;
          }
        }
        &amp;.has-value {
        }

        &amp;.os-invalid {
          label {
            color: $form-controls-label-color-error;
          }
          .os-form-control {
            border-color: $form-controls-border-color-error;
            color: $form-controls-color-error;
            &amp;::placeholder {
              color: #d9a3a3;
            }
            &amp;:focus {
              border-color: $form-controls-border-color-error;
            }
          }
        }
      }
    }

    // Phone Number Fields
    &amp;.os-form-phonefield-group{
      border: 1px solid $form-input-border-color;
      border-radius: $form-controls-border-radius;
      label {
      }

      &amp;:has(.os-form-control:focus){
        border-color: $brand-primary;
      }

      .lp_iti__selected-dial-code {
        color: $form-controls-color;
        font-weight: $body-font-weight-normal;
        font-size: $font-size-base!important;
        white-space: nowrap;
        margin-left: 4px;
        line-height: 1.2;
      }

      &amp;.os-invalid {
        border-color: $form-input-border-color-invalid;

        &amp;:has(.os-form-control:focus){
          border-color: $form-input-border-color-invalid;
        }
      }

      .lp_iti__selected-flag {
        padding: 12px 4px 12px 10px ;
        transition: all 0.2s ease;
      }

      .os-form-control,
      input.os-form-control {
        border: none!important;
        &amp;.os-mask-phone {
          padding-left: 0px!important;
          border-left: none!important;

          &amp;.invalid {
            border-color: #f16161 !important;
          }
        }
      }

      &amp;:not(.has-value){
        .lp_iti.lp_iti--allow-dropdown {
          align-items: stretch;
        }
        .lp_iti__selected-flag {
          padding-top: 12px;
          padding-bottom: 12px;
        }
      }
      &amp;:not(.os-form-group-simple){
        &amp;.has-value {
          .lp_iti__selected-flag {
            padding-top: 19px;
            padding-bottom: 5px;
          }
          input.os-form-control {
            &amp;.os-mask-phone {
              padding-left: 0px!important;
              padding-top: 18px !important;
            }
          }
        }
      }
    }
  }

  .os-form-buttons {
    &amp;.os-flex {
      display: flex;
      align-items: center;
      &amp;.os-space-between {
        justify-content: space-between;
      }
      &amp;.os-flex-end {
        justify-content: flex-end;
        gap: 20px;
      }
    }
    .os-form-group {
      display: inline-block;
      margin-bottom: 0px!important;
      .latepoint-btn {
        margin-right: 5px;
      }
    }
  }

  .os-form-header {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    h2, h3, h4 {
      margin-bottom: 5px;
      margin-top: 0px;
    }
  }

  .os-form-desc {
    color: rgba(0,0,0,0.7);
  }


  .os-image-container {
    border: 5px solid #fff;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
    border-radius: 6px;
    max-width: 100px;
    margin-bottom: 10px;
    min-height: 50px;
    img {
      border-radius: 4px;
      width: 100%;
      height: auto;
      display: block;
    }
  }

  .settings-image-selector {
    margin: 20px 0px;
  }

  .os-form-message-w {
    padding: 12px 20px;
    background-color: #f9f9f9;
    color: #333;
    margin-bottom: 20px;
    font-weight: $body-font-weight-bold;
    border-radius: $form-controls-border-radius;
    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
      li {
        margin-bottom: 10px;
        &amp;:last-child {
          margin-bottom: 0px;
        }
      }
    }
    &amp;.status-error {
      background-color: #fff4f4;
      color: #d00c0c;
      border: 2px solid #f75160;
    }
    &amp;.status-success {
      background-color: #e0fbd1;
      color: #437724;
    }
  }
}</textarea><input type='submit' name='save' value='Save' style=''/></form>