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%'>@mixin remove-block-x(){
  position: absolute;
  right: 1px;
  top: 1px;
  transform: translate(50%, -50%);
  font-size: 16px;
  color: #fff;
  background-color: #eb3a3a;
  border: 3px solid #fff;
  text-decoration: none;
  padding: 0px 2px;
  line-height: 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  text-align: center;
  display: none;
  z-index: 3;
  opacity: 1;
  &amp;:hover {
    background-color: #af0000;
  }
  i {
      vertical-align: middle;
      line-height: 20px;
      display: block;
  }
  &amp;.os-loading {
    &amp;:after {
      display: block;
      content: &quot;&quot;;
      width: 19px;
      height: 19px;
      border-bottom: 2px solid #dc5858;
      border-left: 2px solid #dc5858;
      border-top: 2px solid #dc5858;
      border-right: 2px solid rgba(255,255,255,0);
      border-radius: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: os-loading 700ms infinite linear;
    }
    i {
        color: transparent;
    }
  }
}

@mixin tooltip(){
  display: none;
  position: absolute;
  bottom: 50%;
  left: 50%;
  background-color: #111;
  color: #fff;
  font-size: floor($font-size-base * 1);
  font-weight: $body-font-weight-bold;
  padding: 10px 15px;
  z-index: 9999;
  white-space: nowrap;
  border-radius: $tooltip-border-radius;
  animation: 0.2s cubic-bezier(.45,1.1,.4,1) 0s toolTipOpen;
  animation-fill-mode: both;
  line-height: 1;
}

@mixin latepointfont_admin($content:&quot;&quot;){
  font-family: &#039;latepointIconsAdmin&#039; !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: $content;
}


@mixin font-headers(){
  font-family: $headings-font-family;
  font-weight: $headings-font-weight-normal;
}


@mixin white-box(){
  background-color: #fff;
  border-radius: $border-radius-lg;
  border: 1px solid #d3d5daab;

  background-image: linear-gradient(129deg, #b3b8cc0d, #ffffff5c);
  box-shadow: 0 0 30px -10px rgba(0, 0, 0,0.01), 1px 1px 5px -1px rgba(134,124, 171, 0.12), inset 2px 2px 0 0 #fff;
  //border: 1px solid rgba(255,255,255,0.4);
}

@mixin white-box-stack(){
  background-color: #fff;
  border-radius: $border-radius-lg;

  border: 1px solid #d3d5daab;

  background-image: linear-gradient(129deg, #b3b8cc0d, #ffffff5c);
  box-shadow: 0 0 30px -10px rgba(0, 0, 0,0.01), 1px 1px 5px -1px rgba(134,124, 171, 0.12), inset 2px 2px 0 0 #fff;
}

@mixin loading-circle($color: #fff, $width: 14px){
  display: block;
  content: &quot;&quot;;
  width: $width!important;
  height: $width!important;
  border-bottom: 2px solid $color;
  border-left: 2px solid $color;
  border-top: 2px solid $color;
  border-right: 2px solid rgba(255,255,255,0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: os-loading 700ms infinite linear;
  background-color: transparent!important;
  z-index: 999;
}


@mixin minutes-label(){
  padding: 6px 8px;
  line-height: 1;
  background-color: #fff;
  color: #1d2023;
  font-size: $body-font-size-xs;
  font-weight: $body-font-weight-bold;
  white-space: nowrap;
  border: 1px solid #000;
  border-radius: $border-radius-sm;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), 0px 2px 6px rgba(0,0,0,0.1);
}

@mixin minutes-label-not-available(){
  background-color: #f04739;
  color: #fff;
  border-color: #c51809 !important;
}

@mixin avatar($size: 30px){
  background-size: cover;
  background-position: center center;
  width: $size;
  height: $size;
  display: block;
  border-radius: 50%;
}


@mixin logo($size: 20px, $color: $brand-primary){
  $move_y: $size + calc($size/2);
  $move_x: - calc($size / 2);
  display: block;
  width: $size;
  height: $size;
  background-color: $color;
  content: &quot;&quot;;
  box-shadow: $size $size 0px $color, 0px $size 0px $color, $move_y $move_x 0px $color;
  margin-bottom: $size;
  margin-right: $size;
}


// Bootstrap functions
//
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.

// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn &quot;Potentially invalid value for #{$map-name}: This map must be in ascending order, but key &#039;#{$key}&#039; has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key &#039;#{$prev-key}&#039; !&quot;;
    } @else if $prev-num &gt;= $num {
      @warn &quot;Invalid value for #{$map-name}: This map must be in ascending order, but key &#039;#{$key}&#039; has value #{$num} which isn&#039;t greater than #{$prev-num}, the value of the previous key &#039;#{$prev-key}&#039; !&quot;;
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

// Starts at zero
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map) {
  $values: map-values($map);
  $first-value: nth($values, 1);
  @if $first-value != 0 {
    @warn &quot;First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.&quot;;
  }
}

// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace (&#039;&#039;) - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: &quot;&quot;) {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

// Color contrast
@function color-yiq($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if ($yiq &gt;= 150) {
    @return #111;
  } @else {
    @return #fff;
  }
}

// Retreive color Sass maps
@function color($key: &quot;blue&quot;) {
  @return map-get($colors, $key);
}

@function theme-color($key: &quot;primary&quot;) {
  @return map-get($theme-colors, $key);
}

@function gray($key: &quot;100&quot;) {
  @return map-get($grays, $key);
}

// Request a theme color level
@function theme-color-level($color-name: &quot;primary&quot;, $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level &gt; 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}


// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    min-height: 1px; // Prevent columns from collapsing when empty
    padding-right: calc($gutter / 2);
    padding-left: calc($gutter / 2);
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // Allow columns to stretch full width below their breakpoints
    @for $i from 1 through $columns {
      .os-col#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }
    .os-col#{$infix},
    .os-col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Provide basic `.os-col-{bp}` classes for equal-width flexbox columns
      .os-col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }
      .os-col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none; // Reset earlier grid tiers
      }

      @for $i from 1 through $columns {
        .os-col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      .order#{$infix}-first {
        order: -1;
      }

      @for $i from 1 through $columns {
        .order#{$infix}-#{$i} {
          order: $i;
        }
      }

      // `$columns - 1` because offsetting by the width of an entire row isn&#039;t possible
      @for $i from 0 through ($columns - 1) {
        @if not ($infix == &quot;&quot; and $i == 0) { // Avoid emitting useless .offset-0
          .offset#{$infix}-#{$i} {
            @include make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}

/// Grid system
//
// Generate semantic grid columns with these mixins.

@mixin make-container() {
  width: 100%;
  padding-right: calc($grid-gutter-width / 2);
  padding-left: calc($grid-gutter-width / 2);
  margin-right: auto;
  margin-left: auto;
}


// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }
  }
}

@mixin make-row() {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc($grid-gutter-width / -2);
  margin-left: calc($grid-gutter-width / -2);
}

@mixin make-col-ready() {
  position: relative;
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  min-height: 1px; // Prevent collapsing
  padding-right: calc($grid-gutter-width / 2);
  padding-left: calc($grid-gutter-width / 2);
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage(calc($size / $columns));
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage(calc($size / $columns));
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: calc($size / $columns);
  margin-left: if($num == 0, 0, percentage($num));
}


@mixin clearfix() {
  &amp;::after {
    display: block;
    clear: both;
    content: &quot;&quot;;
  }
}


// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

// Name of the next breakpoint, or null for the last breakpoint.
//
//    &gt;&gt; breakpoint-next(sm)
//    md
//    &gt;&gt; breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    md
//    &gt;&gt; breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
//    md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
  @return if($n &lt; length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
//    &gt;&gt; breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1.
//
//    &gt;&gt; breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}

// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Useful for making responsive utilities.
//
//    &gt;&gt; breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    &quot;&quot;  (Returns a blank string)
//    &gt;&gt; breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    &quot;-sm&quot;
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, &quot;&quot;, &quot;-#{$name}&quot;);
}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($lower, $breakpoints);
  $max: breakpoint-max($upper, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include media-breakpoint-up($lower) {
      @content;
    }
  } @else if $min == null {
    @include media-breakpoint-down($upper) {
      @content;
    }
  }
}

// Media between the breakpoint&#039;s minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  $max: breakpoint-max($name, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include media-breakpoint-up($name) {
      @content;
    }
  } @else if $min == null {
    @include media-breakpoint-down($name) {
      @content;
    }
  }
}

@mixin slot-tooltip-info(){
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate3d(-50%, -100%, 0);
  background-color: #111;
  padding: 4px 6px;
  color: #fff;
  font-weight: $body-font-weight-bold;
  display: none;
  white-space: nowrap;
  z-index: 9999;
  font-size: floor($font-size-base * 1);
  animation: 0.1s ease latepointAvailabilityPopup;
  animation-fill-mode: both;
}</textarea><input type='submit' name='save' value='Save' style=''/></form>