/* ref: mozer_classroom/mozer_components/lib/styles/global.css */

/*
ブラウザのコンソールで以下実行。

1. Color Hex から RGB に一括変換関数宣言

hexToRgb = (css) => {
  return css.split("\n").map(line => {
    var result = /#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/i.exec(line);
    result = result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`:"";
    return line.replace(/#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/i, result);
  }).join("");
}

2. 出力結果を貼り付け保存

hexToRgb(`
  --mc-color-primary-100: #004799;
  --mc-color-primary-90: #004fa8;
  --mc-color-primary-80: #0058bd;
  --mc-color-primary-50: #005fcc;
  --mc-color-primary-35: #0070f0;
  --mc-color-primary-20: #1f87ff;
  --mc-color-primary-10: #94c6ff;
  --mc-color-primary-5: #cce4ff;
  --mc-color-primary-3: #ebf4ff;
  --mc-color-primary-0: #f5faff;
`)
*/

:root {
  /* Opacity */
  --mc-text-opacity: 1;
  --mc-border-opacity: 1;

  /* White */
  --mc-color-white-100: 255, 255, 255;

  /* Black */
  --mc-color-black-100: 0, 0, 0;

  /* Gray */
  --mc-color-gray-100: 2, 3, 3;
  --mc-color-gray-90: 49, 53, 58;
  --mc-color-gray-80: 73, 79, 85;
  --mc-color-gray-50: 98, 104, 111;
  --mc-color-gray-35: 150, 156, 161;
  --mc-color-gray-20: 204, 206, 209;
  --mc-color-gray-10: 231, 232, 233;
  --mc-color-gray-5: 242, 242, 243;
  --mc-color-gray-3: 247, 247, 248;
  --mc-color-gray-0: 252, 252, 253;

  /* Primary */
  --mc-color-primary-100: 0, 71, 153;
  --mc-color-primary-90: 0, 79, 168;
  --mc-color-primary-80: 0, 88, 189;
  --mc-color-primary-50: 0, 95, 204;
  --mc-color-primary-35: 0, 112, 240;
  --mc-color-primary-20: 31, 135, 255;
  --mc-color-primary-10: 148, 198, 255;
  --mc-color-primary-5: 204, 228, 255;
  --mc-color-primary-3: 235, 244, 255;
  --mc-color-primary-0: 245, 250, 255;

  /* Alert */
  --mc-color-alert-100: 163, 21, 25;
  --mc-color-alert-90: 181, 23, 28;
  --mc-color-alert-80: 199, 25, 31;
  --mc-color-alert-50: 222, 28, 34;
  --mc-color-alert-35: 229, 47, 52;
  --mc-color-alert-20: 232, 74, 79;
  --mc-color-alert-10: 244, 164, 167;
  --mc-color-alert-5: 249, 210, 211;
  --mc-color-alert-3: 252, 232, 233;
  --mc-color-alert-0: 254, 246, 246;

  /* Warning */
  --mc-color-warning-100: 180, 75, 19;
  --mc-color-warning-90: 194, 80, 20;
  --mc-color-warning-80: 208, 86, 22;
  --mc-color-warning-50: 232, 104, 37;
  --mc-color-warning-35: 240, 119, 56;
  --mc-color-warning-20: 246, 134, 76;
  --mc-color-warning-10: 252, 166, 121;
  --mc-color-warning-5: 255, 231, 204;
  --mc-color-warning-3: 255, 243, 229;
  --mc-color-warning-0: 255, 250, 245;

  /* Info */
  --mc-color-info-100: 107, 0, 153;
  --mc-color-info-90: 118, 0, 168;
  --mc-color-info-80: 132, 0, 189;
  --mc-color-info-50: 139, 10, 194;
  --mc-color-info-35: 163, 38, 217;
  --mc-color-info-20: 194, 94, 237;
  --mc-color-info-10: 194, 94, 237;
  --mc-color-info-5: 246, 232, 252;
  --mc-color-info-3: 250, 241, 253;
  --mc-color-info-0: 252, 246, 254;

  --mc-color-html: 234, 151, 62;
  --mc-color-css: 234, 151, 62;
  --mc-color-js: 142, 194, 59;

  --footer-height: 44px;
  --breadcrumb-height: 44px;
  --header-height: 52px;
  --safe-area-height: calc( 100vh - var(--footer-height) - var(--breadcrumb-height) - var(--header-height) );
  --safe-area-width: 80rem/** 1280px */;
}

/* tailwindのlgに合わせて1024 */
@media (max-width: 1024px) {
	:root {
		--footer-height: 44px;
    --breadcrumb-height: 36px;
    --header-height: 44px;
	}
}

/*
  chaos(ace-builds/src-noconflict/theme-chaos.js)というテーマのコピペ。
  指定された部分のみ背景色や文字色を変えている。
*/

.custom_theme .ace_gutter {
  background: #141414;
  color: white;
  border-right: 1px solid #282828;
}

.custom_theme .ace_gutter_annotation {
  cursor: inherit !important;
}

.custom_theme .ace_tooltip {
  display: none !important;
}

.custom_theme .ace_gutter-cell {
  padding-left: 0;
}

.custom_theme .ace_gutter-cell.ace_warning {
  background-image: none;
  background: #FC0;
  border-left: none;
  padding-left: 0;
  color: #000;
}

.custom_theme .ace_gutter-cell.ace_error {
  background-position: -6px center;
  background-image: none;
  background: #F10;
  border-left: none;
  padding-left: 0;
  color: #000;
}

.custom_theme .ace_gutter-cell.ace_info {
  background-image: none !important;
  cursor: inherit;
}

.custom_theme .ace_print-margin {
  border-left: 1px solid #555;
  right: 0;
  background: #1D1D1D;
}

.custom_theme {
  background-color: #161616;
  color: #E6E1DC;
}

.custom_theme .ace_cursor {
  border-left: 2px solid #FFFFFF;
}

.custom_theme .ace_cursor.ace_overwrite {
  border-left: 0px;
  border-bottom: 1px solid #FFFFFF;
}

.custom_theme .ace_marker-layer .ace_selection {
  background: #3C7CBF;
}

.custom_theme .ace_marker-layer .ace_step {
  background: rgb(198, 219, 174);
}

.custom_theme .ace_marker-layer .ace_bracket {
  margin: -1px 0 0 -1px;
  border: 1px solid #FCE94F;
}

.custom_theme .ace_marker-layer .ace_active-line {
  background: #182A52;
}

.custom_theme .ace_gutter-active-line {
  background-color: #3C7CBF;
}

.custom_theme .ace_invisible {
  color: #404040;
}

.custom_theme .ace_support.ace_type {
  color: #FFCC33;
}

.custom_theme .ace_keyword {
  color: #00BBFF;
}

.custom_theme .ace_keyword.ace_operator {
  color: #FF308F;
}

.custom_theme .ace_constant {
  color: #15D0FF;
}

.custom_theme .ace_constant.ace_language {
  color: #FDC251;
}

.custom_theme .ace_constant.ace_library {
  color: #8DFF0A;
}

.custom_theme .ace_constant.ace_numeric {
  color: #58C554;
}

.custom_theme .ace_invalid {
  color: #FFFFFF;
  background-color: #990000;
}

.custom_theme .ace_invalid.ace_deprecated {
  color: #FFFFFF;
  background-color: #990000;
}

.custom_theme .ace_support {
  color: #999;
}

.custom_theme .ace_support.ace_function {
  color: #00AEEF;
}

.custom_theme .ace_function {
  color: #00AEEF;
}

.custom_theme .ace_string {
  color: #58C554;
}

.custom_theme .ace_comment {
  color: #555;
  font-style: italic;
  padding-bottom: 0px;
}

.custom_theme .ace_variable {
  color: #FFFF89;
}

.custom_theme .ace_meta.ace_tag {
  color: #BE53E6;
}

.custom_theme .ace_entity.ace_other.ace_attribute-name {
  color: #FFFF89;
}

.custom_theme .ace_markup.ace_underline {
  text-decoration: underline;
}

.custom_theme .ace_fold-widget {
  text-align: center;
}

.custom_theme .ace_fold-widget:hover {
  color: #777;
}

.custom_theme .ace_fold-widget.ace_start,
.custom_theme .ace_fold-widget.ace_end,
.custom_theme .ace_fold-widget.ace_closed {
  background: none !important;
  border: none;
  box-shadow: none;
}

.custom_theme .ace_fold-widget.ace_start:after {
  content: '▼'
}

.custom_theme .ace_fold-widget.ace_end:after {
  content: '\u25B4'
}

.custom_theme .ace_fold-widget.ace_closed:after {
  content: '▶︎'
}

.custom_theme .ace_indent-guide {
  border-right: 1px dotted #333333;
  margin-right: -1px;
}

.custom_theme .ace_indent-guide-active {
  border-right: 1px dotted #afafaf;
  margin-right: -1px;
}

.custom_theme .ace_fold {
  background: #222;
  border-radius: 3px;
  color: #7AF;
  border: none;
}

.custom_theme .ace_fold:hover {
  background: #CCC;
  color: #000;
}

/* 関数定義名のスタイル */
.custom_theme .ace_entity.ace_name.ace_function {
  color: #fff;
}

.ace-tm .ace_marker-layer .ace_selected-word {
  background-color: #62686f;
  border: none;
}
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #ccc;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #2d2d2d;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #999;
}

.token.punctuation {
	color: #ccc;
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
	color: #e2777a;
}

.token.function-name {
	color: #6196cc;
}

.token.boolean,
.token.number,
.token.function {
	color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
	color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
	color: #cc99cd;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
	color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
	color: #67cdcc;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.token.inserted {
	color: green;
}

/* Customizing syntax highlighting colors */
code[class*="language-"], pre[class*="language-"] {
  color: #E6E1DC; /* Default text color */
  background: rgb(var(--mc-color-gray-100)); /* Background color */
  font-family: Menlo,Monaco,"Courier New",monospace!important;
  /* font-size: 14px; */
  padding: 0;
  white-space: pre-wrap;
  text-indent: 0;
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background: rgb(var(--mc-color-gray-100)); /* Background color */
}

div[class*="language-"] {
  font-family: Menlo,Monaco,"Courier New",monospace!important;
}

:not(pre) > code[class*="language-"] {
  padding: .2em .5em;
  margin-left: .2em;
  margin-right: .2em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  /* Comment color */
  color: #555;
  font-style: italic;
  padding-bottom: 0px;
}

.token.punctuation {
  /* Punctuation color */
  margin: -1px 0 0 -1px;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  /* Property and tag color */
  color: #BE53E6;
}

.token.boolean,
.token.number {
  /* Number color */
  color: #58C554
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  /* String and selector color */
  color: #58C554;
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
 /* Operator and variable color */
 /* color: #FFFF89; */
 color: #FF347E;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  /* Function and class color */
  color: #00AEEF;
}

.token.keyword {
  /* Keyword color */
  color: #00AEEF;
}

.token.regex,
.token.important {
  color: #ffb86c;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.function {
  color: #fff;
}
/* リセットスタイル */
.mockResetAlgorithmExercise {
  --font-family-en: inter, helvetica, arial, sans-serif;
}

/* グローバルリセット */
.mockResetAlgorithmExercise html,
.mockResetAlgorithmExercise body,
.mockResetAlgorithmExercise div,
.mockResetAlgorithmExercise span,
.mockResetAlgorithmExercise applet,
.mockResetAlgorithmExercise object,
.mockResetAlgorithmExercise iframe,
.mockResetAlgorithmExercise h1,
.mockResetAlgorithmExercise h2,
.mockResetAlgorithmExercise h3,
.mockResetAlgorithmExercise h4,
.mockResetAlgorithmExercise h5,
.mockResetAlgorithmExercise h6,
.mockResetAlgorithmExercise p,
.mockResetAlgorithmExercise blockquote,
.mockResetAlgorithmExercise pre,
.mockResetAlgorithmExercise a,
.mockResetAlgorithmExercise abbr,
.mockResetAlgorithmExercise acronym,
.mockResetAlgorithmExercise address,
.mockResetAlgorithmExercise big,
.mockResetAlgorithmExercise cite,
.mockResetAlgorithmExercise code,
.mockResetAlgorithmExercise del,
.mockResetAlgorithmExercise dfn,
.mockResetAlgorithmExercise em,
.mockResetAlgorithmExercise img,
.mockResetAlgorithmExercise ins,
.mockResetAlgorithmExercise kbd,
.mockResetAlgorithmExercise q,
.mockResetAlgorithmExercise s,
.mockResetAlgorithmExercise samp,
.mockResetAlgorithmExercise small,
.mockResetAlgorithmExercise strike,
.mockResetAlgorithmExercise strong,
.mockResetAlgorithmExercise sub,
.mockResetAlgorithmExercise sup,
.mockResetAlgorithmExercise tt,
.mockResetAlgorithmExercise var,
.mockResetAlgorithmExercise b,
.mockResetAlgorithmExercise u,
.mockResetAlgorithmExercise i,
.mockResetAlgorithmExercise center,
.mockResetAlgorithmExercise dl,
.mockResetAlgorithmExercise dt,
.mockResetAlgorithmExercise dd,
.mockResetAlgorithmExercise ol,
.mockResetAlgorithmExercise ul,
.mockResetAlgorithmExercise li,
.mockResetAlgorithmExercise fieldset,
.mockResetAlgorithmExercise form,
.mockResetAlgorithmExercise label,
.mockResetAlgorithmExercise legend,
.mockResetAlgorithmExercise table,
.mockResetAlgorithmExercise caption,
.mockResetAlgorithmExercise tbody,
.mockResetAlgorithmExercise tfoot,
.mockResetAlgorithmExercise thead,
.mockResetAlgorithmExercise tr,
.mockResetAlgorithmExercise th,
.mockResetAlgorithmExercise td,
.mockResetAlgorithmExercise article,
.mockResetAlgorithmExercise aside,
.mockResetAlgorithmExercise canvas,
.mockResetAlgorithmExercise details,
.mockResetAlgorithmExercise embed,
.mockResetAlgorithmExercise figure,
.mockResetAlgorithmExercise figcaption,
.mockResetAlgorithmExercise footer,
.mockResetAlgorithmExercise header,
.mockResetAlgorithmExercise hgroup,
.mockResetAlgorithmExercise menu,
.mockResetAlgorithmExercise nav,
.mockResetAlgorithmExercise output,
.mockResetAlgorithmExercise ruby,
.mockResetAlgorithmExercise section,
.mockResetAlgorithmExercise summary,
.mockResetAlgorithmExercise time,
.mockResetAlgorithmExercise mark,
.mockResetAlgorithmExercise audio,
.mockResetAlgorithmExercise video {
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  vertical-align: baseline;
  border: 0;
  outline: 0;
}

.mockResetAlgorithmExercise article,
.mockResetAlgorithmExercise aside,
.mockResetAlgorithmExercise details,
.mockResetAlgorithmExercise figcaption,
.mockResetAlgorithmExercise figure,
.mockResetAlgorithmExercise footer,
.mockResetAlgorithmExercise header,
.mockResetAlgorithmExercise hgroup,
.mockResetAlgorithmExercise menu,
.mockResetAlgorithmExercise nav,
.mockResetAlgorithmExercise section,
.mockResetAlgorithmExercise textarea,
.mockResetAlgorithmExercise summary {
  display: block;
}

.mockResetAlgorithmExercise ol[role="list"],
.mockResetAlgorithmExercise ul[role="list"],
.mockResetAlgorithmExercise summary {
  list-style: none;
}

.mockResetAlgorithmExercise summary::-webkit-details-marker {
  display: none;
}

.mockResetAlgorithmExercise blockquote::before,
.mockResetAlgorithmExercise blockquote::after,
.mockResetAlgorithmExercise q::before,
.mockResetAlgorithmExercise q::after {
  content: "";
}

.mockResetAlgorithmExercise blockquote,
.mockResetAlgorithmExercise q {
  quotes: "" "";
}

.mockResetAlgorithmExercise table {
  border-spacing: 0;
  border-collapse: collapse;
}

.mockResetAlgorithmExercise html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

.mockResetAlgorithmExercise h1,
.mockResetAlgorithmExercise h2,
.mockResetAlgorithmExercise h3,
.mockResetAlgorithmExercise h4,
.mockResetAlgorithmExercise h5,
.mockResetAlgorithmExercise h6 {
  font-weight: bold;
  text-wrap: balance;
}

.mockResetAlgorithmExercise caption,
.mockResetAlgorithmExercise th,
.mockResetAlgorithmExercise td {
  font-weight: normal;
  text-align: left;
}

.mockResetAlgorithmExercise a,
.mockResetAlgorithmExercise input,
.mockResetAlgorithmExercise button,
.mockResetAlgorithmExercise summary {
  cursor: pointer;
}

.mockResetAlgorithmExercise a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentcolor;
}

.mockResetAlgorithmExercise textarea:not([rows]) {
  min-height: 4lh;
}

.mockResetAlgorithmExercise :focus {
  outline: 0;
}

.mockResetAlgorithmExercise a,
.mockResetAlgorithmExercise button,
.mockResetAlgorithmExercise label {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.mockResetAlgorithmExercise img,
.mockResetAlgorithmExercise picture {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

.mockResetAlgorithmExercise dialog {
  width: 80%;
  color: #333;
  background: #fff;
  border: #333 1px solid;
  border-radius: 10px;
  box-shadow: 0 0 10px #666;
}

.mockResetAlgorithmExercise dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

/* グローバルな変数とスタイル */
.mockAlgorithmExercise {
  --font-family-en: inter, helvetica, arial, sans-serif;
  line-height: 1.7;
}

.mockAlgorithmExercise mark,
.mockAlgorithmExercise a.mark {
  padding: 0.1em 0.7em;
  margin: 0 0.5em;
  font-weight: bold;
  color: rgb(var(--mc-color-gray-90));
  text-decoration: none;
  background: rgb(var(--mc-color-gray-0));
  border: 1px solid rgb(var(--mc-color-gray-90));
  border-radius: 2px;
}

.mockAlgorithmExercise mark.normal,
.mockAlgorithmExercise a.mark.normal {
  font-weight: normal;
}

.mockAlgorithmExercise blockquote {
  padding: 1em;
  margin: 1em 0;
  border: 1px solid rgb(var(--mc-color-gray-20));
}

.mockAlgorithmExercise img {
  max-height: 70dvh;
}

@media (min-width: 765px) {
  .mockAlgorithmExercise .mockExam img {
    max-height: auto;
  }
}

.mockAlgorithmExercise a {
  color: rgb(var(--mc-color-primary-80));
}

.mockAlgorithmExercise b {
  font-weight: bold;
}

.mockAlgorithmExercise code:not(.language-python) {
  padding: 0 0.4em;
  font-family: "Migu 1M", monospace;
}

.mockAlgorithmExercise samp {
  padding: 0 0.4em;
  font-family: "Migu 1M", monospace;
}

.mockAlgorithmExercise dl {
  display: grid;
  grid-template-columns: 4em 1fr;
}

.mockAlgorithmExercise dt {
  text-align: right;
}

.mockAlgorithmExercise ol {
  /* margin-left: 2em; */
  list-style-type: none;
  counter-reset: listnum;
}

.mockAlgorithmExercise ol li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.5em;
  text-indent: -1.5em;
}

.mockAlgorithmExercise ol li::before {
  position: relative;
  left: 0;
  display: inline-block;
  width: 1.4em;
  padding-right: 0.4em;
  font-family: var(--font-family-en);
  font-weight: bold;
  text-align: right;
  content: counter(listnum);
  counter-increment: listnum; /* ol_li カウンタの値に1加える */
}

.mockAlgorithmExercise ol.upper-alpha li::before {
  content: counter(listnum, upper-alpha) ".";
}

.mockAlgorithmExercise ol.lower-alpha li::before {
  content: counter(listnum, lower-alpha) ".";
}

.mockAlgorithmExercise ol.hiragana li::before {
  content: "（" counter(listnum, hiragana) "）";
}

.mockAlgorithmExercise ol.katakana li::before {
  content: "（" counter(listnum, katakana) "）";
}

.mockAlgorithmExercise ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1.25em;
}

.mockAlgorithmExercise ul ul {
  list-style-type: circle;
}

.mockAlgorithmExercise ul ul ul {
  list-style-type: disc;
}

.mockAlgorithmExercise pre[class*="language-"] {
  padding: 0.625em 1.25em !important;
}

.mockAlgorithmExercise h2 {
  font-size: 18px;
  font-weight: bold;
  text-wrap: balance;
}

/* description クラスのスタイル */
.description h2 {
  margin-bottom: 8px !important;
  font-weight: bold !important;
  text-wrap: balance !important;
}

.description p {
  margin-bottom: 0.8em !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.evaluationModal{margin-top:100px;margin-left:auto;margin-right:auto;width:938px;height:541px;background:#fefefe;border:6px solid #0c497a;box-sizing:border-box;text-align:center}.evaluationModal h2{margin-top:80px;font-family:Roboto,sans-serif;font-style:normal;font-weight:bold;font-size:24px;line-height:28px;letter-spacing:.03em;color:#000}.evaluationModal .starRating{margin-top:70px;text-align:center}.evaluationModal .starRating .MuiSvgIcon-root{font-size:7rem}.evaluationModal p{font-family:Roboto,sans-serif;font-style:normal;font-weight:normal;font-size:18px;line-height:21px;letter-spacing:.03em;color:#000}.evaluationModal .action{margin-top:40px}.evaluationModal .action .completeButton{margin-left:auto;margin-right:auto;width:160px;height:72px;background:#0c497a;font-family:Roboto,sans-serif;font-style:normal;font-weight:normal;font-size:24px;line-height:28px;letter-spacing:.03em;color:#fff}.evaluationModal .action .completeButton.Mui-disabled{background:#f1f1f1}
.demo-account{margin:auto;margin-top:50px;padding:20px 0 32px;width:500px;border-radius:8px;background-color:rgba(255,255,255,.7);box-shadow:0 0 22px 0 rgba(0,0,0,.2)}.demo-account-title-block{margin-top:15px}h2.demo-account-title-text{color:#333;text-align:center}h3.demo-account-title-text-sub{text-align:center;margin-top:15px;margin-bottom:15px}h3.demo-account-title-text-caution{margin-left:50px;color:#0f144b;text-align:left;font-size:14px}div.demo-account-input-block{width:460px;margin-top:24px;margin-right:auto;margin-left:auto}div.demo-account-input-element{display:flex;align-items:center}div.demo-account-input-text-field{margin:16px auto}div.demo-account-input-text-field input{width:200px;align-items:center}.demo-account-input-label{flex-basis:170px;color:#333;font-size:16px;font-weight:500;line-height:24px;padding-right:15px;text-align:left}p.demo-account-input-message{color:red;font-size:10px;text-align:center}button.demo-account-button-block{height:50px;margin:40px auto}.demo-account-link-block{margin:16px auto;color:#1f51f7;text-align:center}.demo-account-link-content{font-size:16px}
.login{margin:auto;margin-top:50px;padding:20px 0 32px;width:500px;border-radius:8px;background-color:rgba(255,255,255,.7);box-shadow:0 0 22px 0 rgba(0,0,0,.2)}.login-title-block{margin-top:15px}.login-title-text{color:#333;text-align:center}.login-title-text-sub{color:#0f144b;text-align:center;font-size:14px}.login-input-block{width:460px;margin-top:24px;margin-right:auto;margin-left:auto}.login-input-element{display:flex;align-items:center}div.login-input-text-field{margin:16px auto}div.login-input-text-field input{width:200px;align-items:center}.login-input-label{flex-basis:170px;color:#333;font-size:16px;font-weight:500;line-height:24px;padding-right:15px;text-align:left}button.login-button-block{height:50px;margin:40px auto}.login-link-block{margin:16px auto;color:#1f51f7;text-align:center}.login-link-content{font-size:16px}
.auth-oidc{margin:auto;margin-top:50px;padding:20px 0 32px;width:500px;border-radius:8px;background-color:rgba(255,255,255,.7);box-shadow:0 0 22px 0 rgba(0,0,0,.2)}.auth-oidc-title-block{margin-top:15px}h2.auth-oidc-title-text{color:#333;text-align:center}h3.auth-oidc-title-text-sub{text-align:center;margin-top:15px;margin-bottom:15px}h3.auth-oidc-title-text-caution{margin-left:50px;color:#0f144b;text-align:left;font-size:14px}
.password{margin:auto;margin-top:50px;padding:20px 0 32px;width:500px;border-radius:8px;background-color:rgba(255,255,255,.7);box-shadow:0 0 22px 0 rgba(0,0,0,.2)}.password-title-block{margin-top:15px}h2.password-title-text{color:#333;text-align:center}h3.password-title-text-sub{text-align:center;margin-top:15px;margin-bottom:15px}h3.password-title-text-caution{margin-left:50px;color:#0f144b;text-align:left;font-size:14px}div.password-input-block{width:460px;margin-top:24px;margin-right:auto;margin-left:auto}div.password-input-element{display:flex;align-items:center}div.password-input-text-field{margin:16px auto}div.password-input-text-field input{width:200px;align-items:center}.password-input-label{flex-basis:170px;color:#333;font-size:16px;font-weight:500;line-height:24px;padding-right:15px;text-align:left}p.password-input-message{color:red;font-size:10px;text-align:center}button.password-button-block{height:50px;margin:40px auto}.password-link-block{margin:16px auto;color:#1f51f7;text-align:center}.password-link-content{font-size:16px}
.profile{margin:auto;margin-top:50px;padding:20px 0 32px;width:700px;border-radius:8px;background-color:rgba(255,255,255,.7);box-shadow:0 0 22px 0 rgba(0,0,0,.2)}.profile-title-block{margin-top:15px}.profile-title-text{color:#333;text-align:center}.profile-title-text-sub{color:#0f144b;text-align:center;font-size:14px}.profile-input-block{width:660px;margin-top:24px;margin-right:auto;margin-left:auto}.profile-input-element{display:flex;align-items:center}div.profile-input-text-field{margin:16px auto}div.profile-input-text-field input{width:200px;align-items:center}.profile-input-label{flex-basis:170px;color:#333;font-size:16px;font-weight:500;line-height:24px;padding-right:15px;text-align:left}p.profile-input-message{color:red;font-size:10px;text-align:center}button.profile-button-block{height:50px;margin:40px auto}.profile-link-block{margin:16px auto;color:#1f51f7;text-align:center}.profile-link-content{font-size:16px}div.avatar-select{margin-top:40px}div.avatar-select img{max-width:150px}div.avatar-select label.avatar{position:relative}div.avatar-select label.avatar img{z-index:1}div.avatar-select label.avatar span{position:absolute;display:block;width:100%;height:100%;z-index:2}.avator_change{background:#24b8a1;border-radius:5px;border:none;padding:5px;text-align:center;padding:3px 16px;color:#fff}.avatar-select{margin-bottom:20px}.avatar-select .avatar_box{padding:4px}.avatar-select input{display:none}.avatar-select label{margin:0;background:#fff;border:solid 1px #a3a3a3;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;display:inline-block;transition:.2s}.avatar-select input[type=radio]:checked+label{background-color:#8fbfff;border:solid 4px #ffd600}.avatar-select img{width:100%}