/**
 * Copyright (C) 2017 Wasabeef
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@charset "UTF-8";


html {
  height: 100%;
}

body {
  overflow: scroll;
  display: table;
  table-layout: fixed;
  width: 100%;
  min-height:100%;
}

#editor {
  display: table-cell;
  outline: 0px solid transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#editor[placeholder]:empty:not(:focus):before {
  content: attr(placeholder);
  opacity: .5;
}

p {
    margin-top: 0;
    margin-bottom: 8px;
    -webkit-margin-before: 0em;
}


// Thanks to Jonathan B (https://stackoverflow.com/a/23501094) for figuring that out

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}

img {

    max-width: 100%;
    object-fit: contain;

}


/* change this when changing the class name of resizableImageClass in rich_text_editor.js */
img.resizable {

  border: 1px solid gray;

  touch-action: none;

  /* This is suggested by the doc, but I'm not sure that it is required when there is no large borders around the image. */
  /* This makes things *much* easier */
 /* box-sizing: border-box;*/

}


.rotate90deg {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate180deg {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rotate270deg {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}