@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP&display=swap');

/* begin: general page and application wrapper styles */
html,
body,
#application {
  width: 100%;
  height: 100%;

  overflow: hidden;
  padding: 0px;
  margin: 0px;
  font-family: 'OpenSans', sans-serif;
  font-size: 16px;
}

body > div {
  position: absolute;
  width: 100%;
  height: 100%;
}

div[formerly] {
  display: none;
}

div.previewContainer {
  font-family: 'OpenSans', sans-serif;
  font-size: 13px;
}

textarea {
  overflow: hidden;
}

input::-ms-reveal,
input::-ms-clear {
  display: none;
}

.slide-appear {
  opacity: 0;
  transition: opacity 0.7s ease-in;
}

.slide-appear.slide-appear-active {
  opacity: 1;
}

.slide-enter {
  max-height: 0;
  transition: all 0.3s ease-in;
}

.slide-enter.slide-enter-active {
  max-height: 1000px;
}

.slide-leave {
  max-height: 1000px;
  transition: all 0.3s ease-out;
}

.slide-leave.slide-leave-active {
  max-height: 0;
}

.example-enter {
  height: 0px;
}

.example-enter.example-enter-active {
  height: 100px;
  transition: height 0.3s ease;
}

.example-leave.example-leave-active {
  height: 0px;
  transition: height 0.3s ease;
}

.dialog-backdrop {
  height: 100%;
}

/* end: general page and application wrapper styles */

/* begin: fonts */

@font-face {
  font-family: 'Armata';
  src: url('../../../common/fonts/armata/Armata-Regular.eot');
  src: url('../../../common/fonts/armata/Armata-Regular.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/armata/Armata-Regular.woff') format('woff'),
    url('../../../common/fonts/armata/Armata-Regular.ttf') format('truetype'),
    url('../../../common/fonts/armata/Armata-Regular.svg#fonts/armata/Armata-Regular')
      format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../../../common/fonts/notosans/NotoSans-Regular.eot');
  src: url('../../../common/fonts/notosans/NotoSans-Regular.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/notosans/NotoSans-Regular.woff') format('woff'),
    url('../../../common/fonts/notosans/NotoSans-Regular.ttf')
      format('truetype'),
    url('../../../common/fonts/notosans/NotoSans-Regular.svg#NotoSans-Regular')
      format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../../../common/fonts/notosans/NotoSans-Italic.eot');
  src: url('../../../common/fonts/notosans/NotoSans-Italic.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/notosans/NotoSans-Italic.woff') format('woff'),
    url('../../../common/fonts/notosans/NotoSans-Italic.ttf') format('truetype'),
    url('../../../common/fonts/notosans/NotoSans-Italic.svg#NotoSans-Italic')
      format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../../../common/fonts/notosans/NotoSans-Bold.eot');
  src: url('../../../common/fonts/notosans/NotoSans-Bold.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/notosans/NotoSans-Bold.woff') format('woff'),
    url('../../../common/fonts/notosans/NotoSans-Bold.ttf') format('truetype'),
    url('../../../common/fonts/notosans/NotoSans-Bold.svg#fonts/notosans/NotoSans-Bold')
      format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../../../common/fonts/notosans/NotoSans-BoldItalic.eot');
  src: url('../../../common/fonts/notosans/NotoSans-BoldItalic.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/notosans/NotoSans-BoldItalic.woff')
      format('woff'),
    url('../../../common/fonts/notosans/NotoSans-BoldItalic.ttf')
      format('truetype'),
    url('../../../common/fonts/notosans/NotoSans-BoldItalic.svg#NotoSans-BoldItalic')
      format('svg');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'OpenSans';
  src: url('../../../common/fonts/opensans/OpenSans-Regular-webfont.eot');
  src: url('../../../common/fonts/opensans/OpenSans-Regular-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/opensans/OpenSans-Regular-webfont.woff')
      format('woff'),
    url('../../../common/fonts/opensans/OpenSans-Regular-webfont.ttf')
      format('truetype'),
    url('../../../common/fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular')
      format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans';
  src: url('../../../common/fonts/opensans/OpenSans-Italic-webfont.eot');
  src: url('../../../common/fonts/opensans/OpenSans-Italic-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/opensans/OpenSans-Italic-webfont.woff')
      format('woff'),
    url('../../../common/fonts/opensans/OpenSans-Italic-webfont.ttf')
      format('truetype'),
    url('../../../common/fonts/opensans/OpenSans-Italic-webfont.svg#open_sansitalic')
      format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'OpenSans';
  src: url('../../../common/fonts/opensans/OpenSans-Bold-webfont.eot');
  src: url('../../../common/fonts/opensans/OpenSans-Bold-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/opensans/OpenSans-Bold-webfont.woff')
      format('woff'),
    url('../../../common/fonts/opensans/OpenSans-Bold-webfont.ttf')
      format('truetype'),
    url('../../../common/fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold')
      format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans';
  src: url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.eot');
  src: url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.woff')
      format('woff'),
    url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.ttf')
      format('truetype'),
    url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic')
      format('svg');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'OpenSansBold';
  src: url('../../../common/fonts/opensans/OpenSans-Bold-webfont.eot');
  src: url('../../../common/fonts/opensans/OpenSans-Bold-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/opensans/OpenSans-Bold-webfont.woff')
      format('woff'),
    url('../../../common/fonts/opensans/OpenSans-Bold-webfont.ttf')
      format('truetype'),
    url('../../../common/fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold')
      format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSansBold';
  src: url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.eot');
  src: url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.woff')
      format('woff'),
    url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.ttf')
      format('truetype'),
    url('../../../common/fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic')
      format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'OpenSansBold';
  src: url('../../../common/fonts/opensans/OpenSans-ExtraBold-webfont.svg');
  src: url('../../../common/fonts/opensans/OpenSans-ExtraBold-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/opensans/OpenSans-ExtraBold-webfont.woff')
      format('woff'),
    url('../../../common/fonts/opensans/OpenSans-ExtraBold-webfont.ttf')
      format('truetype'),
    url('../../../common/fonts/opensans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold')
      format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSansBold';
  src: url('../../../common/fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg');
  src: url('../../../common/fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('../../../common/fonts/opensans/OpenSans-ExtraBoldItalic-webfont.woff')
      format('woff'),
    url('../../../common/fonts/opensans/OpenSans-ExtraBoldItalic-webfont.ttf')
      format('truetype'),
    url('../../../common/fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic')
      format('svg');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Poppins';
  src: url('../../../common/fonts/Poppins/Poppins-SemiBold.ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('../../../common/fonts/Poppins/Poppins-Medium.ttf');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Abril Fat Face';
  src: url('../../../common/fonts/Abril_Fatface/AbrilFatface-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bungee';
  src: url('../../../common/fonts/Bungee/Bungee-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Cabin';
  src: url('../../../common/fonts/Cabin/Cabin-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Cabin';
  src: url('../../../common/fonts/Cabin/Cabin-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Cabin';
  src: url('../../../common/fonts/Cabin/Cabin-Italic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Cinzel';
  src: url('../../../common/fonts/Cinzel/Cinzel-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../../../common/fonts/Cinzel/Cinzel-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../../../common/fonts/EB_Garamond/EBGaramond-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../../../common/fonts/EB_Garamond/EBGaramond-Bold.ttf')
    format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../../../common/fonts/EB_Garamond/EBGaramond-Italic.ttf')
    format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../../../common/fonts/EB_Garamond/EBGaramond-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Esteban';
  src: url('../../../common/fonts/Esteban/Esteban-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('../../../common/fonts/Fira_Sans/FiraSans-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('../../../common/fonts/Fira_Sans/FiraSans-Bold.ttf')
    format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('../../../common/fonts/Fira_Sans/FiraSans-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('../../../common/fonts/Fira_Sans/FiraSans-Italic.ttf')
    format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Hind';
  src: url('../../../common/fonts/Hind/Hind-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Hind';
  src: url('../../../common/fonts/Hind/Hind-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('../../../common/fonts/Lato/Lato-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url('../../../common/fonts/Lato/Lato-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url('../../../common/fonts/Lato/Lato-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Lato';
  src: url('../../../common/fonts/Lato/Lato-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Libre Baskerville';
  src: url('../../../common/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../../../common/fonts/Libre_Baskerville/LibreBaskerville-Bold.ttf')
    format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../../../common/fonts/Libre_Baskerville/LibreBaskerville-Italic.ttf')
    format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../../../common/fonts/Merriweather/Merriweather-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Merriweather';
  src: url('../../../common/fonts/Merriweather/Merriweather-Bold.ttf')
    format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Merriweather';
  src: url('../../../common/fonts/Merriweather/Merriweather-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Merriweather';
  src: url('../../../common/fonts/Merriweather/Merriweather-Italic.ttf')
    format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../../../common/fonts/Montserrat/Montserrat-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../common/fonts/Montserrat/Montserrat-Bold.ttf')
    format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../common/fonts/Montserrat/Montserrat-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../common/fonts/Montserrat/Montserrat-Italic.ttf')
    format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('../../../common/fonts/NotoSerif/NotoSerif-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Serif';
  src: url('../../../common/fonts/NotoSerif/NotoSerif-Bold.ttf')
    format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Serif';
  src: url('../../../common/fonts/NotoSerif/NotoSerif-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Noto Serif';
  src: url('../../../common/fonts/NotoSerif/NotoSerif-Italic.ttf')
    format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Nunito';
  src: url('../../../common/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../../common/fonts/Nunito/Nunito-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../../common/fonts/Nunito/Nunito-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../../common/fonts/Nunito/Nunito-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Oxygen';
  src: url('../../../common/fonts/Oxygen/Oxygen-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Oxygen';
  src: url('../../../common/fonts/Oxygen/Oxygen-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Poller One';
  src: url('../../../common/fonts/Poller_One/PollerOne.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Racing Sans One';
  src: url('../../../common/fonts/Racing_Sans_One/RacingSansOne-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Raleway';
  src: url('../../../common/fonts/Raleway/Raleway-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Raleway';
  src: url('../../../common/fonts/Raleway/Raleway-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Raleway';
  src: url('../../../common/fonts/Raleway/Raleway-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Raleway';
  src: url('../../../common/fonts/Raleway/Raleway-Italic.ttf')
    format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('../../../common/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../../../common/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../../../common/fonts/Roboto/Roboto-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('../../../common/fonts/Roboto/Roboto-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('../../../common/fonts/Roboto_Slab/RobotoSlab-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Slab';
  src: url('../../../common/fonts/Roboto_Slab/RobotoSlab-Bold.ttf')
    format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../../../common/fonts/Roboto_Condensed/RobotoCondensed-VariableFont_wght.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../../../common/fonts/Roboto_Condensed/RobotoCondensed-Italic-VariableFont_wght.ttf');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Rubik';
  src: url('../../../common/fonts/Rubik/Rubik-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Rubik';
  src: url('../../../common/fonts/Rubik/Rubik-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Rubik';
  src: url('../../../common/fonts/Rubik/Rubik-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Rubik';
  src: url('../../../common/fonts/Rubik/Rubik-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Sanchez';
  src: url('../../../common/fonts/Sanchez/Sanchez-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Sanchez';
  src: url('../../../common/fonts/Sanchez/Sanchez-Italic.ttf')
    format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Squada One';
  src: url('../../../common/fonts/Squada_One/SquadaOne-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tinos';
  src: url('../../../common/fonts/Tinos/Tinos-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Tinos';
  src: url('../../../common/fonts/Tinos/Tinos-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Tinos';
  src: url('../../../common/fonts/Tinos/Tinos-BoldItalic.ttf')
    format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Tinos';
  src: url('../../../common/fonts/Tinos/Tinos-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Varela Round';
  src: url('../../../common/fonts/Varela_Round/VarelaRound-Regular.ttf')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* end: fonts */

a {
  color: white;
}

.RichEditor-blockquote {
  font-style: italic;
  margin: 16px 0;
  padding: 10px 20px;
}

.RichEditor-textsize {
  font-size: 1.6em;
}