/* ------------------------------------------------------ */
/*   colors
/* ------------------------------------------------------ */
body {
  background-color: #fafafa !important;
}
.navibar {
  background-color: #fafafa !important;
  box-shadow: none !important;
}
.bizutto {
  color: #29579f;
}
/* --- inverted button --- */
.ui.inverted.bizutto.buttons .button,
.ui.inverted.bizutto.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #29579f inset !important;
  box-shadow: 0px 0px 0px 2px #29579f inset !important;
  color: #29579f;
}
.ui.inverted.bizutto.buttons .button:hover,
.ui.inverted.bizutto.button:hover,
.ui.inverted.bizutto.buttons .button:focus,
.ui.inverted.bizutto.button:focus,
.ui.inverted.bizutto.buttons .button.active,
.ui.inverted.bizutto.button.active,
.ui.inverted.bizutto.buttons .button:active,
.ui.inverted.bizutto.button:active {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  color: #ffffff;
}
.ui.inverted.bizutto.buttons .button:hover,
.ui.inverted.bizutto.button:hover {
  background-color: #0f4f9f;
}
.ui.inverted.bizutto.buttons .button:focus,
.ui.inverted.bizutto.button:focus {
  background-color: #004a9f;
}
.ui.inverted.bizutto.buttons .active.button,
.ui.inverted.bizutto.active.button {
  background-color: #0f4f9f;
}
.ui.inverted.bizutto.buttons .button:active,
.ui.inverted.bizutto.button:active {
  background-color: #00479f;
}
.ui.inverted.primary.buttons .button,
.ui.inverted.primary.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #f3ab32 inset !important;
  box-shadow: 0px 0px 0px 2px #f3ab32 inset !important;
  color: #f3ab32;
}
.ui.inverted.primary.buttons .button:hover,
.ui.inverted.primary.button:hover,
.ui.inverted.primary.buttons .button:focus,
.ui.inverted.primary.button:focus,
.ui.inverted.primary.buttons .button.active,
.ui.inverted.primary.button.active,
.ui.inverted.primary.buttons .button:active,
.ui.inverted.primary.button:active {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  color: #ffffff;
}
.ui.inverted.primary.buttons .button:hover,
.ui.inverted.primary.button:hover {
  background-color: #f3ab32;
}
.ui.inverted.primary.buttons .button:focus,
.ui.inverted.primary.button:focus {
  background-color: #f5c51e;
}
.ui.inverted.primary.buttons .active.button,
.ui.inverted.primary.active.button {
  background-color: #f3ab32;
}
.ui.inverted.primary.buttons .button:active,
.ui.inverted.primary.button:active {
  background-color: #f5c51e;
}
.ui.inverted.secondary.buttons .button,
.ui.inverted.secondary.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #c7c5c5 inset !important;
  box-shadow: 0px 0px 0px 2px #c7c5c5 inset !important;
  color: #979797;
}
.ui.inverted.secondary.buttons .button:hover,
.ui.inverted.secondary.button:hover,
.ui.inverted.secondary.buttons .button:focus,
.ui.inverted.secondary.button:focus,
.ui.inverted.secondary.buttons .button.active,
.ui.inverted.secondary.button.active,
.ui.inverted.secondary.buttons .button:active,
.ui.inverted.secondary.button:active {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.secondary.buttons .button:hover,
.ui.inverted.secondary.button:hover {
  background-color: #c7c5c5;
}
.ui.inverted.secondary.buttons .button:focus,
.ui.inverted.secondary.button:focus {
  background-color: #929292;
}
.ui.inverted.secondary.buttons .active.button,
.ui.inverted.secondary.active.button {
  background-color: #929292;
}
.ui.inverted.secondary.buttons .button:active,
.ui.inverted.secondary.button:active {
  background-color: #929292;
}
/* --- toggle --- */
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: #29579f !important;
}
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
  background-color: #4374c4 !important;
}
/* --- basic label --- */
.ui.basic.info.label {
  background-color: #FCFFF5;
  color: #2C662D;
  border-color: #A3C293 !important;
  font-weight: 400;
}
.ui.primary.label {
  background-color: #f3ab32;
  color: #FFFFFF;
}
/* --- card --- */
.ui.card {
  background-color: inherit!important;
  box-shadow: none!important;
}
.ui.card > .bottom.content {
  margin-top: -1rem;
  display: flex;
  align-items: flex-end;
  border: none;
}
/* --- modal --- */
.ui.modal .content {
  background-color: #fafafa !important;
}
.ui.modal .result .content {
  background-color: rgba(0,0,0,0) !important;
}
/* --- popup --- */
.ui.menu .ui.pointing.dropdown .menu>.item:hover,
.ui.pointing.dropdown .menu>.item:hover,
.ui.pointing.dropdown .menu:hover::after {
  background: #f1f1f1 !important;
}
.ui.popup.calendar::before {
  background: #f9fafb !important;
}
.ui.popup.calendar.top::before {
  background: #fff !important;
}
.ui.popup.mod {
  background-color: #fafafa !important;
  min-width: 550px !important;
}
.ui.popup.mod::before {
  background-color: #fafafa !important;
}
/* ------------------------------------------------------ */
/*   image
/* ------------------------------------------------------ */
img.bizutto_h_logo {
  height: 50px !important;
  width: auto !important;
  margin: 0;
}
img.bizutto_v_logo {
  height: 65px !important;
  width: auto !important;
}
img.console_logo {
  height: 15px !important;
  width: auto !important;
  margin: 0;
}
img.company_j.logo {
  height: 15px;
  width: auto!important;
}
img.service_logo {
  width: 70%;
  height: auto;
  max-height: 120px;
  margin-top :-0.9rem;
  margin-bottom: -1.1rem;
}
/* ------------------------------------------------------ */
/*   font
/* ------------------------------------------------------ */
.ui.form .field > label,
.ui.form .grouped.fields > label {
  color: #767676;
  font-weight: normal!important;
}
.ui.table th {
  color: #767676!important;
  font-weight: normal!important;
}
.ui.list label,
.ui.grid .column label {
  color: #767676!important;
  font-weight: normal!important;
  font-size: 11px;
}
.ui.header .sub.header {
  padding-top: .21428571rem
}
.ui.horizontal.statistic {
  display: inline;
}
.ui.horizontal.statistic>.value {
  font-size: 24px !important;
}
.ui.horizontal.statistic>.label {
  vertical-align: bottom;
}
[id^="conf_"] {
  font-size:16px;
}
.va-t {
  vertical-align: top !important;
}
.va-b {
  vertical-align: bottom !important;
}
.meta {
  font-size: 11px !important;
  color: grey !important;
}
.fs-11 {
  font-size: 11px !important;
}
.fs-12 {
  font-size: 12px !important;
}
.fs-13 {
  font-size: 13px !important;
}
.fs-14 {
  font-size: 14px !important;
}
.fs-16 {
  font-size: 16px !important;
}
.fs-18 {
  font-size: 18px !important;
}
.fs-20 {
  font-size: 20px !important;
}
.fs-24 {
  font-size: 24px !important;
}
.nowrap {
  white-space: nowrap !important;
}
.t-ul {
  text-decoration: underline;
  text-underline-position: under;
}
/* ------------------------------------------------------ */
/*   幅
/* ------------------------------------------------------ */
.w-auto {
  width: auto !important;
}
.mw-auto {
  min-width: auto !important;
}
/* ------------------------------------------------------ */
/*   余白
/* ------------------------------------------------------ */
.mt-navi {
  margin-top: 5rem !important;
}
.mt-4 {
  margin-top: 1.5rem !important;
}
.mt-5 {
  margin-top: 2rem !important;
}
.mb-5 {
  margin-bottom: 2rem !important;
}
.mb-7 {
  margin-bottom: 3rem !important;
}
.ml-1 {
  margin-left: 0.25rem !important;
}
.ml-2 {
  margin-left: 0.5rem !important;
}
.ml-3 {
  margin-left: 1rem !important;
}
.ml-5 {
  margin-left: 2rem !important;
}
.pt-1 {
  padding-top: 0.25rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.pt-4 {
  padding-top: 1.5rem !important;
}
.pt-5 {
  padding-top: 2rem !important;
}
.pl-3 {
  padding-left: 1rem !important;
}
.plr-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.plr-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.mlr-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}
.output {
  padding-top: 0.5em;
}
.btn_close_modal {
  margin-right: 1.5rem !important;
  margin-top: 0.5rem !important;
}
.ui.modal .extra.content {
  padding-top: 1rem !important;
  display: flex;
}
.ui.horizontal.to_left.divider:before {
  width: 10%;
}
.ui.horizontal.to_left.divider:after {
  width: 90%;
}
/* ------------------------------------------------------ */
/*   form
/* ------------------------------------------------------ */
.ui.form .fields.ul {
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding-bottom: 1em;
}
.ui.form .fields .field.ul {
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding-bottom: 0.5em;
}
/* ------------------------------------------------------ */
/*   button
/* ------------------------------------------------------ */
/* input+button 隙間を均す*/
input.smooth_right {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.smooth_left.button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
/* ------------------------------------------------------ */
/*   accordion
/* ------------------------------------------------------ */
.ui.accordion>.content {
  margin-left: 3rem;
  margin-right: 1rem;
}
/* ------------------------------------------------------ */
/*   jpPlot
/* ------------------------------------------------------ */
.usage_area .ui.table,
.ink_usage_area .ui.table {
  margin-left: 32.8409px;
  width: calc(100% - 43px);
}
.jqplot-axis.jqplot-xaxis {
  display: none
}
/* ------------------------------------------------------ */
/*   step
/* ------------------------------------------------------ */
.ui.ordered.steps {
  border: none!important;
}
.ui.ordered.steps .step {
  border-right: solid 2px #fafafa;
  background: #f0f0f0;
}
.ui.ordered.steps .step.active {
  background: #a0a0a0;
}
.ui.ordered.steps .step:before {
  font-size: 1.71428571rem;
  color: grey;
}
.ui.ordered.steps .step.active:before {
  font-size: 1.71428571rem;
  color: #ffffff;
}
.ui.ordered.steps .step.active:after {
  background: #a0a0a0;
}
.ui.ordered.steps .step:after {
  background: #f0f0f0;
  border-color: #fafafa;
  border-width: 0 2px 2px 0;
}
.ui.steps .step.active .title {
  color: #ffffff;
}
.ui.steps .step .title {
  font-size: 1.1rem;
  color: grey;
}
/* ------------------------------------------------------ */
/*   transition
/* ------------------------------------------------------ */
.transition[class*="fly left-ex"].in {
  -webkit-animation-name: flyInLeftEx;
  animation-name: flyInLeftEx;
}
.transition[class*="fly right-ex"].in {
  -webkit-animation-name: flyInRightEx;
  animation-name: flyInRightEx;
}
.transition[class*="fly left-ex"].out {
  -webkit-animation-name: flyOutLeftEx;
  animation-name: flyOutLeftEx;
}
.transition[class*="fly right-ex"].out {
  -webkit-animation-name: flyOutRightEx;
  animation-name: flyOutRightEx;
}
@-webkit-keyframes flyInLeftEx {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1500px, 0, 0);
    transform: translate3d(1500px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes flyInLeftEx {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1500px, 0, 0);
    transform: translate3d(1500px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes flyInRightEx {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-1500px, 0, 0);
    transform: translate3d(-1500px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes flyInRightEx {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-1500px, 0, 0);
    transform: translate3d(-1500px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes flyOutLeftEx {
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes flyOutLeftEx {
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@-webkit-keyframes flyOutRightEx {
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes flyOutRightEx {
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}