﻿@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* clius thema */
:root {
  --login-background: #EEE;
  --background: #EEE;
  --scroll-shadow: rgba(0,0,0,.2);
  --text: #262626;
  --shadow: 3px 3px 3px rgba(0,0,0,0.5);
  --hover-background: #F8F8FF;
  --hover-text: #333;
  --highlight-background: #3879D9;
  --highlight-text: #FFF;
  --disabled-background: #F3F3F3;
  --disabled-text: #888;
  --note-text: #888;
  --note-background: #fcf8da;
  --alert-text: #F00;
  --window-caption-background: #888;
  --window-caption-text: #FFF;
  --window-edge: none;
  --window-resize-edge: 2px solid #333;
  --window-shadow: 0px 2px 4px 0 rgba(0,0,0,0.2);
  --window-body-background: var(--background);
  --window-body-text: var(--text);
  --contents-background: #FFF;
  --contents-scroll-shadow: rgba(0,0,0,.2);
  --contents-text: #262626;
  --contents-edge: none;
  --contents-shadow: none;
  --contents-header-background: #FFF;
  --contents-header-text: #555;
  --contents-header-edge: none;
  --contents-inner-background: #FFF;
  --contents-inner-text: #888;
  --contents-inner-edge: var(--contents-edge);
  --contents-footer-background: var(--contents-background);
  --contents-footer-text: var(--contents-text);
  --contents-error-background: var(--contents-background);
  --contents-error-text: #D20;
  --contents-notFound-background: var(--contents-background);
  --contents-notFound-text: var(--contents-text);
  --list-font-size: 120%;
  --list-padding: 3px;
  --list-padding-horz: 6px;
  --list-header-background: var(--contents-background);
  --list-header-text: var(--contents-text);
  --list-header-hover-background: var(--hover-background);
  --list-header-hover-text: var(--hover-text);
  --list-header-edge: 1px solid var(--separator);
  --list-header-edge-gap: 1px;
  --list-footer-edge: 3px double var(--separator);
  --list-contents-background: #FFF;
  --list-contents-even-background: transparent;
  --list-contents-odd-background: #f5f5f5;
  --list-contents-text: var(--contents-text);
  --list-contents-edge: none;
  --listRowNo-background: #FFF;
  --listRowNo-text: #000;
  --list-text-shadow: none;
  --list-span-background: #FEA;
  --list-span-text: var(--contents-text);
  --list-span-shadow: none;
  --list-total-background: #FFF;
  --list-total-text: var(--contents-text);
  --list-total-border-vertical: 1px solid var(--separator);
  --list-total-border-horizontal: 1px solid var(--separator);
  --list-empty-background: #EEE;
  --list-min-color: #F00;
  --list-max-color: #00F;
  --list-ave-color: var(--text);
  --list-sum-color: var(--text);
  --list-gain-color: #008;
  --list-loss-color: #C00;
  --list-percent-color: #D60;
  --tab-contents-background: var(--contents-background);
  --tab-contents-text: var(--contents-text);
  --tab-active-background: #6a7998;
  --tab-active-text: #FFF;
  --tab-active-boxshadow: insert 1px 1px 1px rgba(0,0,0,0.5);
  --tab-active-offset: 0.5px;
  --tab-hover-background: var(--hover-background);
  --tab-hover-text: var(--hover-text);
  --table-font-size: 100%;
  --table-border-vertical: 1px solid var(--background);
  --table-border-horizontal: 1px solid var(--separator);
  --dialog-content-background: var(--window-body-background);
  --dialog-footer-background: var(--window-body-background);
  --confirm-background: #FFF;
  --confirm-edge: 1px solid #CCC;
  --confirm-border: none;
  --confirm-radius: var(--margin);
  --confirm-shadow: var(--window-shadow);
  --confirm-footer-background: #EEE;
  --group-box-edge: 1px solid #CCCCCC;
  --group-box-background: var(--contents-background);
  --group-box-shadow: none;
  --group-box-margin: var(--margin);
  --button-large-size: 120%;
  --button-midium-size: 110%;
  --button-edge: var(--control-edge);
  --button-edge-gap: 1px;
  --button-shadow: none;
  --button-background: #f6f6f6;
  --button-text: #000;
  --button-hover-background: #ebf4f7;
  --button-hover-text: #000;
  --button-active-background: #FFF;
  --button-active-text: #000;
  --button-pushed-background: #d8e9ef;
  --button-pushed-text: #000;
  --button-disabled-background: transparent;
  --button-disabled-text: #CCC;
  --button-submit-background: #7397ec;
  --button-submit-text: #FFF;
  --button-submit-hover-background: #5f98ec;
  --button-submit-hover-text: #FFF;
  --button-submit-active-background: #3879D9;
  --button-submit-active-text: #FFF;
  --button-submit-pushed-background: #5f98ec;
  --button-submit-pushed-text: #FFF;
  --button-submit-disabled-background: var(--button-disabled-background);
  --button-submit-disabled-text: var(--button-disabled-text);
  --button-submit-edge: 1px solid #6d8fde;
  --button-submit-shadow: 0px 0px 3px rgba(0,0,0,0.5);
  --button-cancel-background: #FFF;
  --button-cancel-text: #000;
  --button-cancel-hover-background: #ebf4f7;
  --button-cancel-hover-text: #000;
  --button-cancel-active-background: #d8e9ef;
  --button-cancel-active-text: #000;
  --button-cancel-pushed-background: #d8e9ef;
  --button-cancel-pushed-text: #000;
  --button-cancel-disabled-background: var(--button-disabled-background);
  --button-cancel-disabled-text: var(--button-disabled-text);
  --button-hold-background: #e6e6b2;
  --button-hold-text: #000;
  --button-hold-hover-background: #ceceaa;
  --button-hold-hover-text: #000;
  --button-hold-active-background: #afaf9a;
  --button-hold-active-text: #000;
  --button-hold-pushed-background: #afaf9a;
  --button-hold-pushed-text: #000;
  --button-hold-disabled-background: var(--button-disabled-background);
  --button-hold-disabled-text: var(--button-disabled-text);
  --button-request-background: var(--button-background);
  --button-request-text: var(--button-text);
  --button-request-hover-background: var(--button-hover-background);
  --button-request-hover-text: var(--button-hover-text);
  --button-request-active-background: var(--button-active-background);
  --button-request-active-text: var(--button-active-text);
  --button-request-pushed-background: var(--button-pushed-background);
  --button-request-pushed-text: var(--button-pushed-text);
  --button-request-disabled-background: var(--button-disable-background);
  --button-request-disabled-text: var(--button-disable-text);
  --switch-on-background: #06D;
  --switch-on-text: #FFF;
  --switch-on-hover-background: #06D;
  --switch-on-hover-text: var(--switch-on-text);
  --switch-on-active-background: var(--switch-on-hover-background);
  --switch-on-active-text: var(--switch-on-hover-text);
  --switch-off-background: #555;
  --switch-off-text: #FFF;
  --switch-off-hover-background: #555;
  --switch-off-hover-text: var(--switch-off-text);
  --switch-off-active-background: var(--switch-off-hover-background);
  --switch-off-active-text: var(--switch-off-hover-text);
  --switch-disabled-background: #334;
  --switch-disabled-text: #888;
  --progress-background: var(--control-background);
  --progress-text: #888;
  --progress-shadow: none;
  --progress-bar1-background: #353;
  --progress-bar2-background: #06D;
  --progress-bar1-out-background: #C83;
  --progress-bar2-out-background: #C33;
  --progress-bar-shadow: none;
  --control-background: #f0f0f0;
  --control-text: #262626;
  --control-edge: 1px solid #ddd;
  --edge-gap: 1px;
  --control-shadow: none;
  --input-shadow: none;
  --control-hover-background: #EEF;
  --control-hover-text: #000;
  --control-active-background: #FFF;
  --control-active-text: var(--control-text);
  --control-disabled-background: #888;
  --control-disabled-text: #555;
  --placeholder-text: #AA8;
  --control-group-background: #36D;
  --control-group-text: #FFF;
  --control-changed-background: #383;
  --control-changed-text: #FFF;
  --control-error-background: #B30;
  --control-error-text: #FFF;
  --control-alert-background: #B30;
  --control-alert-text: #FFF;
  --control-warning-background: #D80;
  --control-warning-text: #FFF;
  --control-information-background: #395;
  --control-information-text: #FFF;
  --scrollbar-background: #DDD;
  --scrollbar-color: #FFF;
  --scrollbar-shadow: inset -1px -1px 0px #DDD, inset 1px 1px 0px #DDD;
  --scrollbar-hover: #EEE;
  --scrollbar-edit-background: var(--scrollbar-background);
  --scrollbar-edit-color: var(--scrollbar-color);
  --scrollbar-edit-hover-background: var(--scrollbar-hover);
  --scrollbar-edit-hover-color: var(--scrollbar-edit-color);
  --scrollbar-edit-focus-background: var(--scrollbar-edit-background);
  --scrollbar-edit-focus-color: var(--scrollbar-edit-color);
  --scrollbar-disabled-background: #888;
  --scrollbar-disabled-color: #CCC;
  --scrollbar-size: 1.4em;
  --slider-handle-background: #12F;
  --slider-handle-edge: none;
  --slider-range-background: var(--control-group-background);
  --color-handle-edge: 2px solid white;
  --color-handle-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5);
  --toolbar-background: #252b47;
  --toolbar-background-horizon: var(--toolbar-background);
  --toolbar-background-vertical: var(--toolbar-background);
  --toolbar-text: #FFF;
  --toolbar-hover-background: #E5E5E5;
  --toolbar-hover-text: #000;
  --toolbar-disabled-background: transparent;
  --toolbar-disabled-text: #888;
  --toolbar-edge: none;
  --toolbar-draggable-hover-background: rgba(0,0,0,0.25);
  --toolbar-draggable-active-background: rgba(0,0,0,0.25);
  --menu-background: #FFF;
  --menu-text: #000;
  --menu-edge: 1px solid #CCCCCC;
  --menu-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
  --menu-hover-background: #E5E5E5;
  --menu-hover-text: #000;
  --menu-active-background:;
  --menu-active-text:;
  --menu-disabled-background:;
  --menu-disabled-text:;
  --menu-icon-background:;
  --menu-icon-text:;
  --menu-icon-active-background:;
  --menu-icon-active-text:;
  --menu-icon-disabled-background:;
  --menu-icon-disabled-text:;
  --separator: #DDD;
  --thumbnail-active-color: #048;
  --tooltip-background: #333740;
  --tooltip-text: #C5C5C6;
  --badge-background: #F30;
  --badge-text: #FFF;
  --hasBadge-background: #FCC;
  --hasBadge-highlight: #FCC;
  --label-background: #888;
  --label-text: #FFF;
  --label-attention-background: #AA0;
  --label-attention-text: #FFF;
  --label-danger-background: #F30;
  --label-danger-text: #FFF;
  --label-current-background: #860;
  --label-current-text: #FFF;
  --label-emphasize-background: #803;
  --label-emphasize-text: #FFF;
  --hasLabel-background: var(--hasBadge-background);
  --hasLabel-highlight: var(--hasBadge-highlight);
  --changed-background: #800;
  --changed-text: #FFF;
  --current: #329c51;
  --current-caption-background: var(--current);
  --current-caption-text: #FFF;
  --past: var(--highlight-background);
  --past-caption-background: var(--past);
  --past-caption-text: #FFF;
  --female-background: #ED1E79;
  --female-text: #FFF;
  --male-background: #0071BC;
  --male-text: #FFF;
  --today-background: #830;
  --today-text: #FFF;
  --holiday-text: #F55;
  --satday-text: #88F;
  --current-background: #532;
  --current-text: #FFF;
  --referrence-background: #253;
  --referrence-text: #FFF;
  --hold-background: #550;
  --hold-text: #FFF;
  --emargency-background: transparent;
  --emargency-text: #F00;
  --semi-emargency-background: transparent;
  --semi-emargency-text: #FF0;
  --folder-color: #FF8;
  --file-color: #FFF;
  --prefix: inherit;
  --prefix-margin: var(--padding);
  --suffix: inherit;
  --suffix-margin: var(--padding);
  --font-family: Noto Sans JP,ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic ProN W3,HiraKakuProN-W3,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,-apple-system,BlinkMacSystemFont,游ゴシック体,YuGothic,Yu Gothic M,游ゴシック Medium,Yu Gothic Medium,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,Helvetica Neue,HelveticaNeue,Helvetica,Arial,Segoe UI,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --font-family-control: var(--font-family);
  --font-family-fixed: 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Sans', 'YuGothic', sans-serif;
  --font-family-logo: "Franklin Gothic Medium";
  --font-size-small: 70%;
  --font-size-regular: 11px;
  --font-size-midium: 150%;
  --font-size-midium-small: 15px;
  --font-size-large: 200%;
  --font-size-extra: 250%;
  --font-size-fixed: 120%;
  --font-weight: 400;
  --font-anti-alias:;
  --line-height: 1.5em;
  --line-height-fixed: 1.5em;
  --letter-spacing: normal;
  --webicon-offset: 0.1em;
  /* must be in principle a multiples of 5 pixel */
  --margin: 5px;
  /* must be in principle a multiples of 3 pixel */
  --padding: 5px;
  --padding-horz: 8px;
  /* must be 1 pixel fixed */
  --gap: 1px;
  /* must be in principle a multiples of 3 pixel */
  --word-margin: 3px;
  --icon-size: 1.3em;
  --icon-size-midium: 1.4em;
  --icon-size-large: 1.6em;
  --loading-background: transparent;
  --loading-image: url(../../assets/image/loadingWhite.gif);
  --loading-size: 5em;
  --timeline-image: url(../../assets/image/timelineWhite.png);
  --compare-newline-background: #8F8;
  --compare-newline-text: var(--contents-text);
  --compare-removeline-background: #F88;
  --compare-removeline-text: var(--contents-text);
  --keyword-background: transparent;
  --keyword-text: #1155CC;
  --keyword-margin: 1px;
  --keyword-padding: 0px;
  --keyword-radius: 0px;
  --keyword-decoration: underline;
  --keyword-weight: inherit;
  --serif-background: #DDD;
  --serif-text: #000;
  --serif-separator-background: #DDD;
  --serif-separator-text: #000;
  --ritch-highlight-color1: #F00;
  --ritch-highlight-color2: #0F0;
  --graph-theme: dark;
  --boxgraph-bead: #888;
  --boxgraph-left: linear-gradient(to top, #508b9a, #73c3d8);
  --boxgraph-right: linear-gradient(to top, #c32722, #f55c58);
  --boxgraph-drl: #7dd47d;
  --media-height: calc( var(--edge-gap) + var(--padding) + 1.3em + var(--padding) + var(--edge-gap) + var(--margin) + var(--edge-gap) + var(--margin) + var(--padding) + 1.3em + var(--padding) + var(--edge-gap) + var(--padding) + 1.3em + var(--padding) + var(--margin) + var(--edge-gap) );
  --split-margin: var(--margin);
}

span.splitText + span.splitText:before {
  content: '/';
  margin: 0 0.2em;
}

div.resultList td > span.male {
  background: #338;
  color: #FFF;
  border-radius: 1em !important;
  padding: 0 1em;
  width: 1em;
  display: inline-block;
}

div.resultList td > span.female {
  background: #A00;
  color: #FFF;
  border-radius: 1em !important;
  padding: 0 1em;
  width: 1em;
  display: inline-block;
}

div.resultList td > div.under_low {
  background: #b8d3ff;
  color: #3b86ff;
}

div.resultList td > div.over_high {
  background: #ffd5d8;
  color: #ff3b48;
}

span.label.male {
  background: var(--male-background);
  color: var(--male-text);
}

span.label.female {
  background: var(--female-background);
  color: var(--female-text);
}

div.parentBlock > div.reportCaption.subCaption {
  border-bottom: 1px solid #ddd;
}

div.parentBlock > div.leftCaption {
  border-right: 1px solid #ddd;
}

.checkboxWrap:not(.classic),
.radioGroup:not(.classic) > .radioWrap,
.radioGroup:not(.classic) > .radioWrapOne > .radioWrap {
  padding: 0 !important;
  margin-right: var(--gap) !important;
}

  .checkboxWrap:not(.classic) > label,
  .radioGroup:not(.classic) > .radioWrap > label,
  .radioGroup:not(.classic) > .radioWrapOne > .radioWrap > label {
    margin: 0 !important;
    padding: var(--padding) 1em !important;
    border-radius: 2em !important;
    background: var(--control-background);
    border: var(--control-edge);
    box-shadow: var(--button-shadow);
  }

div.resultCaption .checkboxWrap:not(.classic) > label {
  border: none;
  margin-top: 1px !important;
}

.checkboxWrap:not(.classic) > label:after,
.checkboxWrap:not(.classic) > label:before,
.radioGroup:not(.classic) > .radioWrap > label:after,
.radioGroup:not(.classic) > .radioWrap > label:before,
.radioGroup:not(.classic) > .radioWrapOne > .radioWrap > label:after,
.radioGroup:not(.classic) > .radioWrapOne > .radioWrap > label:before {
  display: none !important;
}

.checkboxWrap:not(.classic) > input[type=checkbox]:checked + label,
.radioGroup:not(.classic) > .radioWrap > input[type=radio]:checked + label,
.radioGroup:not(.classic) > .radioWrapOne > .radioWrap > input[type=radio]:checked + label {
  background: #677099 !important;
  color: white !important;
}

.radioGroup.radioBlock {
  margin-top: calc(0px - var(--gap));
}

  .radioGroup.radioBlock > .radioWrap,
  .radioGroup.radioBlock > .radioWrapOne > .radioWrap {
    margin-top: var(--gap);
  }

.checkBoxList .checkboxWrap + .checkboxWrap {
  margin-top: var(--gap);
}

.checkboxWrap:not(.classic):hover,
.radioGroup:not(.classic) > .radioWrap:hover,
.radioGroup:not(.classic) > .radioWrapOne > .radioWrap:hover,
.switchWrap:hover {
  border-radius: 2em !important;
}

.checkBoxBlockInner {
  padding: 0 0 var(--gap) var(--gap);
}

  .checkBoxBlockInner .checkboxWrap:not(.classic) {
    margin-top: var(--gap) !important;
  }

.radioGroup:not(.classic).tiny > .radioWrap > label,
.radioGroup:not(.classic).tiny > .radioWrapOne > .radioWrap > label,
.checkboxWrap:not(.classic).tiny > label {
  padding: 0 1em !important;
}

.lineStyle1 {
  color: black;
}

.lineStyle2 {
  color: red;
}

.lineStyle3 {
  color: blue;
}

.lineStyle4 {
  color: green;
}

div.reportCaption.subCaption {
  margin-bottom: var(--gap) !important;
}

div#commonBar.withTopBar {
  padding-bottom: 5px;
  margin-bottom: -5px;
}

div#topBar {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: var(--margin);
  background: var(--contents-background);
  border: var(--contents-edge);
  overflow: hidden;
  z-index: 6;
  position: relative;
}

div#topBar > div.queryBar {
  margin-bottom: 0px;
}

div.queryBar > div.queryBarActionPanel {
  padding: 0.7em 1em 1.3em 1em !important;
}

  div.queryBar > div.queryBarActionPanel button {
    border-radius: 2em;
    padding: var(--padding) 2em;
    color: #6d8fde;
    border: 1px solid #FFF;
  }

    div.queryBar > div.queryBarActionPanel button > .btnLabel {
      text-decoration: underline;
    }

    div.queryBar > div.queryBarActionPanel button.btnSearch {
      color: var(--button-submit-text);
      border: var(--button-submit-edge);
    }

      div.queryBar > div.queryBarActionPanel button.btnSearch > .btnLabel {
        text-decoration: none;
      }

.separator:hover {
  background: transparent !important;
}

#finderBody {
  padding: 0 !important;
}

div.sideBarShowSwitch {
  margin-top: 1em;
}

  div.sideBarShowSwitch > span {
  }

div.sideBar {
  background: transparent;
  color: #636363;
}

  div.sideBar > .logo.text {
    margin: var(--margin) 0;
  }

  div.sideBar > div.sideBarHideSwitch {
    top: 0.5em;
  }

  div.sideBar .sideBarItemList > div.sideBarItem.collapse {
    border-bottom: 1px solid #dfdfdf;
  }

  div.sideBar .sideBarItemList > div.sideBarItem.active {
    background: transparent;
    color: #636363;
  }

  div.sideBar .sideBarItemList > .presetsOuter + div.sideBarItem {
    margin-top: 1em;
  }

  div.sideBar .sideBarItemList > .presetsOuter {
    border: none;
    margin: var(--margin) 0 0 0;
  }

    div.sideBar .sideBarItemList > .presetsOuter .presets.listView {
      background: transparent;
    }

    div.sideBar .sideBarItemList > .presetsOuter .presetRecord {
      background: transparent;
      color: #757575;
      padding-left: 2em;
    }

      div.sideBar .sideBarItemList > .presetsOuter .presetRecord.active {
        background: #bad1da !important;
        color: #262626 !important;
        border-radius: var(--margin);
      }
      div.sideBar .sideBarItemList > .presetsOuter .presetRecord:not(.active):hover {
        background: var(--hover-background);
        color: var(--hover-text);
      }

div.queryBar div.queryBarItem {
  padding-top: var(--line-height);
}

div.queryBarItem > label {
  padding-left: var(--margin);
  padding-right: var(--margin);
}

div.queryBar .addNew {
  margin: var(--line-height) var(--margin) var(--margin) 0 !important;
}

div.queryBar div.queryBarItem > label:first-child,
div.queryBar div.queryBarItem > .dummy + label {
  position: absolute;
  top: 0;
  padding: 0;
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

body:not([screen-mode="MOBILE"]) div.queryResult > div.queryResultBody > div.queryContent {
  margin: var(--margin) var(--margin) var(--margin) 0;
}

body[screen-mode="MOBILE"] div.queryResult > div.queryResultBody > div.queryContent {
  padding: var(--margin);
}

  div.queryResult > div.queryResultBody > div.queryContent > div.resultBlock {
    border-radius: var(--padding);
    overflow: hidden;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }

  div.queryResult > div.queryResultBody > div.queryContent > div.queryModeBar {
    padding: 0 var(--margin);
  }

.searchResult .searchResultGroup {
  border: var(--control-edge) !important;
}

.parentBlock[data-way="right"]:not(.expandFloat) > .expandBlock > .filterList {
  border: none;
  border-left: var(--control-edge);
}
.parentBlock[data-way="left"]:not(.expandFloat) > .expandBlock > .filterList {
  border: none;
  border-right: var(--control-edge);
}
.parentBlock[data-way="top"]:not(.expandFloat) > .expandBlock > .filterList {
  border: none;
  border-bottom: var(--control-edge);
}
.parentBlock[data-way="bottom"]:not(.expandFloat) > .expandBlock > .filterList {
  border: none;
  border-top: var(--control-edge);
}
body[screen-mode="MOBILE"] .parentBlock.expandFloat > .affectedBlock > .resultGraph {
  padding: 10% 0 0 10%;
}

.timeline > div > .milestone {
  color: #ccd0e2 !important;
}

.timeline > div > .milestone:hover,
.timeline > div > .milestone.hover {
  color: #9299b9 !important;
}


.modalBackground .windowCaption {
  background: transparent;
  font-size: var(--font-size-midium);
  padding: 0.5em 1em;
  color: var(--text);
  text-align: center;
}

  .modalBackground .windowCaption > .windowControlBox > button.closeBtn {
    border-radius: 2em !important;
    font-size: var(--font-size-regular);
    height: 2.5em;
    width: 2.5em;
    border: none;
    background: #bfbfbf;
    color: #FFF;
  }

.modalBackground .windowCaption > .windowControlBox > button.closeBtn:hover {
  background: #9d9a9a;
  color: #FFF;
}

.modalBackground .windowCaption  > .windowControlBox {
  top: 50%;
  transform: translateY(-50%);
  right: 0.5em;
}