@charset "UTF-8";
/*
 EKCloud SYSTEM
 Copyright © 2022
*/
/* 
    Created on : 2022/07/08, 16:45:38
    Author     : WAKAHARA, yae
*/
/* ---------------------------------------------------
    MAIN CONTENT STYLE
----------------------------------------------------- */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  /*font-family: "BIZ UDPゴシック", "Hiragino Sans";*/
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  min-width: 500px;
  background-color: #eaf6fd;
}

p {
  color: #1b2d45;
}

/* ---------------------------------------------------
    HEADER STYLE
----------------------------------------------------- */
header .navbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

header, #sidebar {
  /* ナビバーの色指定 */
  /* メニューにカーソルを当てると色が変わる */
  /* メニューのアイコンはアクセント色 */
}
header .navbar, header .nav-link, header .dropdown-menu, header dropdown, header .dropdown-item, #sidebar .navbar, #sidebar .nav-link, #sidebar .dropdown-menu, #sidebar dropdown, #sidebar .dropdown-item {
  color: #00214d !important;
  background-color: #fffffe !important;
}
header .nav-link:hover, header .dropdown-item:focus, header .dropdown-item:hover, #sidebar .nav-link:hover, #sidebar .dropdown-item:focus, #sidebar .dropdown-item:hover {
  color: #00377f !important;
  background-color: #f2f4f6 !important;
}
header i, header .material-icons, #sidebar i, #sidebar .material-icons {
  color: #f9827f;
}

/* アイコンの表示サイズがFonrAwesomeとGoogle Fontでは異なるので調整 */
.material-icons {
  font-size: 1.35em; /* GoogleFontの大きさが見た目FontAwesomeとそろうように設定 */
  margin-left: -0.24em;
}
.material-icons + span { /* GoogleFontの右にあるspan要素 */
  display: inline-block;
  transform: translateY(-0.25em); /* フォントサイズを変えた影響で文字ラインが下にずれる */
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
  width: 240px;
  color: #00214d;
  background-color: #fffffe;
  /* ボタンのアイコンはアクセント色にしない */
}
#sidebar .btn i {
  color: #fffffe;
}

@media screen and (min-width: 992px) {
  .offcanvas {
    transform: none;
    transition: none;
    visibility: visible !important;
  }
  .offcanvas-outside {
    transition: none;
    padding-left: 240px;
  }
}
/* ---------------------------------------------------
    DATEPICKER STYLE
----------------------------------------------------- */
.datepicker .datepicker-days th.dow:first-child, .datepicker .datepicker-days td:first-child {
  /* 日曜日は赤 */
  color: #f9827f;
}
.datepicker .datepicker-days th.dow:last-child, .datepicker .datepicker-days td:last-child {
  /* 土曜日は青 */
  color: #004db3;
}
.datepicker .datepicker-days td.active {
  /* 選択された日は背景primary色 */
  background-color: #00a573 !important;
  color: #00214d !important;
  background-image: none;
}
.datepicker .datepicker-days td.today {
  /* 今日は背景灰色 */
  background-color: #f2f4f6;
}
.datepicker .datepicker-days .day:hover {
  background-color: rgba(255, 227, 77, 0.5);
}

/* ---------------------------------------------------
    REPAIR INPUT STYLE
----------------------------------------------------- */
.repair-input {
  font-size: 14px;
}
.repair-input .form-label {
  font-weight: 700;
  margin-bottom: 0.1rem;
}

/* ---------------------------------------------------
    DATA VIEW STYLE
----------------------------------------------------- */
.card dt {
  margin-right: 0.5rem;
  vertical-align: top;
  float: left;
}

.card dd {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.2rem;
  padding: 0 0.3rem;
  overflow: hidden;
  min-height: 1.6rem;
}

/* ---------------------------------------------------
    MUTISELECT STYLE
----------------------------------------------------- */
select[multiple=multiple] {
  /* 一瞬表示されるのを防ぐ */
  display: none;
}

.dashboardcode-bsmultiselect ul.focus {
  /* multiselectで自動色がつくので、他のinputと色を合わせる */
  border-color: #80f5e3 !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 235, 199, 0.25) !important;
}

/* ---------------------------------------------------
  PASSWORD STYLE
----------------------------------------------------- */
.input-container {
  display: flex;
  justify-content: space-between;
  padding: 0;
}
.input-container input:focus, .input-container .input-container input:active {
  outline: none;
  box-shadow: none;
}
.input-container input {
  border: none;
}
.input-container button {
  border: none;
  color: #aaa;
  background-color: transparent;
}

/* ---------------------------------------------------
    WAITING STYLE
----------------------------------------------------- */
#waiting {
  position: absolute;
  top: 0;
  left: 240px;
  background-color: rgba(0, 0, 0, 0.5);
  width: calc(100vw - 240px);
  height: 100vh;
  z-index: 100;
  text-align: center;
  vertical-align: middle;
}
#waiting .helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
#waiting img {
  display: inline-block;
  vertical-align: middle;
  height: 250px;
}