/* 変数定義 */
:root {
    /* システムカラー */
    --system-color      : #19CAD1;
    /* ユーザアイコンの大きさ */
    --user-icon-size    : 10rem;
    /* ボタンアイコンの角 */
    --button-icon-radius: 4px;
}

html {
    font-size   : 13px;
    height      : 100%;
    /* max-width: 100vw; */
}

header .navbar {
    background-color: var(--system-color);
    color           : white;
    padding         : 0;
}

header .navbar-brand {
    padding: 0;
}

header .pjtitle {
    padding-left: 2rem;
}

.pjtitle {
    vertical-align  : middle;
    background-color: var(--system-color);
    color           : white;
    font-size       : 1.6rem !important;
}

body {
    /* min-height: 100vh; */
    /* min-width: 820px; */
}

footer {}

/* copy right のフッタ（スマホで表示しない制御） */
.page-footer {}

/**
 * Beescheduleのロゴ画像
 */
.img-logo {
    width        : 150px;
}

/* =============================
  コントロール
============================= */
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 

/* =============================
  grobalmenu
============================= */

.grobalmenu {
    /* min-width: 0px; */
    white-space  : nowrap;
    text-overflow: ellipsis;
}

.grobalmenu a {
    color: var(--system-color) !important;
}

/**
 * エリアを越えたら表示を省略する(省略記号あり)。
 * TODO: 他の箇所で同等のことをしている分も、このクラスに移行させたい
 */
.overflow-ellipsis {
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}
/**
 * エリアを越えたら表示を省略するが、省略記号は表示しない。
 */
.overflow-clip {
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: clip;
}

/* =============================
  main
============================= */
.sidemenu-frame {
    /**
     * NOTES: サイドメニューの表示はスケジュール画面のみ。
     * スケジュール表示部との隙間は少なくしたいため調整している。
     */
    padding-right: 0 !important;
}

.main {
    /*webkit系*/
    -webkit-box-sizing: border-box;
    /*Firefox*/
    -moz-box-sizing   : border-box;
    /*  */
    box-sizing        : border-box;

    max-width: 100% !important;
}

.main .sidemenu-header {
    padding: 0px;
    border : none;
}

.main .sidemenu-button {
    /* color      : #53535c; */
    background-color: #ededed;
    /* font-weight  : bolder; */
    height          : 2.5rem;
}

.main .sidemenu-table {
    table-layout   : fixed;
    /* サイドメニューのフォントサイズ */
    /* font-size   : 1rem; */
}

.main .sidemenu-table th {
    padding-right: 0 !important;
    height       : 1rem;
    color        : gray;
    font-size    : 0.85rem;
    font-weight  : lighter;
}

.main .sidemenu-table td {
    padding-right: 0 !important;
}

.main .sidemenu-data {
    overflow     : hidden;
    /* 文末を…で省略 */
    text-overflow: ellipsis;
}

.main .sidemenu-data-icon {}

.main .app-title {
    padding    : 0.5rem 1.2rem;
    border-left: 3px solid #009bc6;
}


/* =============================
  ETC.
============================= */
/* 画面表示モード */

input[readonly],
input[disabled],
textarea:read-only {
    color           : black !important;
    border          : none !important;
    background-color: transparent !important;
}

/* input[type=date]::before {
    background: url("/img/calendar.icon.png") no-repeat right center;
} */

/* アイコン ユーザ、検索、地図など */
.b-avatar {
    width : 1.7rem !important;
    height: 1.7rem !important;
}

.colorBallUpdate,
.mapIcon,
.searchIcon {
    margin-left: 3px;
    padding    : 0;
}

.calenderIcon,
.clockIcon {
    left: -10rem;
}

/* エントリー画面等で使用する項目（ラベル＋入力部品のセット） */
.entry-item {
    border-bottom: solid 1px #d3d3d3;
}

/* =============================
  モーダル画面
============================= */

/* ヘッダ、フッタ */

.modal-header,
.modal-footer {
    /**
     * NOTES: 描画されるボタン等のサイズ感に応じて高さが自動調整されるように変更した(2021.07.26)。
     * 'min-height'で設定している理由は、ボタンが何も表示されていない場合でも最低限の高さを確保したいため。
     */
    min-height: 3rem;
}

.modal-header {
    /* margin-bottom      : 0.3rem; */
    padding               : 0.5rem 1.0rem !important;
    /* color              : white;
    background-color      : var(--system-color); */
    background-color      : #e9ecef;
}

.modal-footer {
    /* margin-top      : 0.3rem; */
    padding         : 0.2rem 1.0rem !important;
    background-color: #e9ecef;
}

/* エントリ画面の横線*/
.border-top-cancel {
    border-top: none !important;
}

.border-bottom-cancel {
    border-bottom: none !important;
}

/* *:focus {
    box-shadow: none !important;
} */

/* 新着一覧の閉じるボタンの大きさを調整 */
#app_new_schedule_list_modal .modal-header .close {
  font-size: 2rem;
}

/* *************** */
/* 各コントロール   */
/* *************** */
/* 検索ボックス */
/* .fm-search {
    min-width: 10rem !important;
} */

/* 注釈：エントリ画面のラベル */
.fm-ent-annotation {
    font-size: 0.5rem;
}

/* 日付、時間 アイコン */
.fm-date::-webkit-calendar-picker-indicator,
.fm-dateYm::-webkit-calendar-picker-indicator,
.fm-time::-webkit-calendar-picker-indicator {
    padding : 0;
    margin  : 0;
    position: relative;
    right   : -0.5rem;
    top     : 1px;
}

.fm-date[readonly]::-webkit-calendar-picker-indicator,
.fm-dateYm[readonly]::-webkit-calendar-picker-indicator,
.fm-time[readonly]::-webkit-calendar-picker-indicator {
    display: none;
}

.fm-date {
    width: 8.5rem !important;
}

.fm-date[readonly] {
    width: 7.0rem !important;
}

.fm-dateYm {
    width: 8.0rem !important
}

.fm-dateYm[readonly] {
    width: 6.5rem !important;
}

.fm-time {
    width: 5.7rem !important;
}

.fm-time[readonly] {
    width  : 4.2rem !important;
    /* NOTE: 5588対応。見切れが起こるため設定値は4.2em以上を推奨 */
}

/* ラベル */
.fm-label {
    width: 100%;
}

/* コード */
.fm-code {
    text-transform: lowercase;
}

/* リスト */
.fm-list {
    min-height   : 1rem;
    max-height   : 10.3rem;
    margin-bottom: 0.3rem;
}

/* 案件ID */
.fm-projectId {
    width: 5rem !important;
}

/* 利用者ID */
.fm-clientid {
    width: 5rem !important;
}

/* お客様番号 */
.fm-clientno {
    width: 10rem !important;
}

/* 利用者名 */
.fm-clientname {
    min-width: 100% !important;
}

.fm-clientname-sm {
    min-width: 50% !important;
}

/* カレンダー登録：訪問記録関連ボタン */
.fm-button-visit {
    width: 9.6rem;
}

/* カレンダー登録：日時選択ボタン */
.fm-button-dayinput {
    width: 7.5rem;
}

/* グループ、ユーザ（SELECT） */
.group-select,
.user-select {
    min-width: 12rem;
    max-width: 12rem;
}

/* 色選択 */
.fm-color-btn {
    background-color: #EFEFEF !important;
    color           : black !important;
}

.fm-color-picker {
    background-color: white;
    position        : absolute;
    z-index         : 999999;
    top             : -472px;
}


/* カレンダーのグループ、ユーザ選択（↓ vue-multiselectの） */
.multiselect {
    min-width: 11rem !important;
    min-height: 30px !important;
}
.multiselect, .multiselect__input, .multiselect__single {
    font-size: 13px !important;
    min-height: 1.5rem !important;
    line-height: 1.5rem !important;
    padding: 0px !important;
    margin-bottom: 0px !important;
}
/* 表示部分 */
.multiselect__tags {
    min-height: 30px !important;
    max-height: 30px !important;
    padding-top: 4px !important;
    padding-left: 8px !important;
}
/* 右の矢印ボタン */
.multiselect__select {
    width: 30px !important;
    height: 28px !important;
}
/* option */
.multiselect__option {
    /* 
    min-height: 29px !important;
    */
    padding: 10px 0px 0px 8px !important;
}
/* optionのカーソル */
.multiselect__option--highlight {
    background: #2EA1FF !important;
}


/**
 * スケジュールモーダル上にある'参加者'と'使用物'の選択結果をテキストで付与している。
 * そのパーツ用の汎化CSS。
 * - 区切り文字の後ろにスペースを空けてる
 * - 描画する区切り文字の活性・非活性はCSSで制御してる
 */
#app_schedules_ent_modal .schedule-listitems-result .separator {
    margin-right: 4px;
}
#app_schedules_ent_modal .schedule-listitems-result .schedule-listitem-wrapper:last-child .separator {
    display: none;
}

/**
 * GoogleMapへのリンクボタン
 * 汎化されたボタン生成パーツでの`btn-`クラスの書換えがめんどくさい仕組みになっていたので、
 * ボタン用に定義されているクラスを用いて強制的に色を変更するようにしている。
 */
#app_schedules_ent_modal .mapIcon {
    background-color: #28a745; /* btn-success と同じ色 */
    border-color: #28a745; /* btn-success と同じ色 */
}

/**
 * ボーダーライン設定を強制的に無しにする
 */
.no-border {
    border: none !important;
}

.x-scroll {
    overflow-x: scroll !important;
}
.y-scroll {
    overflow-y: scroll !important;
}

.bw-table {
    table-layout: fixed !important;
}

.bw-table .bw-table-contents {
    table-layout: fixed !important;
    display: table !important;
}

.scrollbar-none {
    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応 */
}
.scrollbar-none::-webkit-scrollbar {  /* Chrome, Safari 対応 */
    display:none;
}

.font-weight-normal {
    font-weight: normal;
}

.text-decoration-line-through {
    text-decoration: line-through;
}

/**
 * NOTES: スマホで画面外のオーバースクロール(バウンス)を無効にする対応。
 * これにより画面を下にスクロールして画面更新されることが無くなるはず。
 */
body {
    overscroll-behavior: none;
}

/* =============================
  機能別
============================= */
/* 各明細行のカーソル */
.meisai-cursor:hover {
    cursor: pointer;
}
.meisai-cursor {
    cursor: default;
}

/* 訪問記録一覧 */
.crColor {
    /* 訪問対応データの色 */
    color: silver;
}

/* 担当者順変更 */
.userOrder-icon {
    padding: 0.3rem 0.7rem;   /* 上下、左右 */
    font-size: 1.3rem;
}

.userOrder-active {
    background-color: pink;

    /* shadow案 */
    /* box-shadow: rgb(0 0 0 / 10%) 4px 4px 12px;
    transform: scale(1.03); */
}

.userOrder-hover {
    /* PC、スマホで異なる */

    /* 間を空白にする案
    border-top: 40px #cacaca solid;
    transition: .3s;
    */
    /* position: relative; */
    border-top: 2px #63DAEF solid;
    background-color: pink;
    /* background-color: lightyellow; */
}

.userOrder-hover:before {
    /* content: '';
    position: absolute; */
    /* 位置適当 */
    /* top: 50%;
    left: 0px;              
    margin-top: 0px; */
    /* 大きさ */
    /* width: 10px;
    height: 10px; */
    /* 色 */
    /* border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg); */
}

.userOrder-hover-normal {
    background-color: #ECECEC;
}

.userOrdersListTop {
    position: relative;
    top: calc(1rem + 2px);
    width: 100%;
    height: 3px;
    background-color: white;
}
#userOrdersList {
    table-layout: fixed;
}
#userOrdersList th:nth-child(1){
}
#userOrdersList th:nth-child(2),
#userOrdersList th:nth-child(3) {
    width: 15%;
}

.groupOrder-active {
    background-color: pink;
}
.groupOrder-hover {
    border-top: 2px #63DAEF solid;
    background-color: pink;
}
.groupOrder-hover-normal {
    background-color: #ECECEC;
}

.accessLogs-annotation{
    margin-top: -10px;
    margin-bottom: 10px;
}


/* ===========
   営業記録用
   ========== */
.star-toggle {
    display: inline-block;
    position: relative;
    margin: 0;
}
.star-checkbox {
    display: none; /* 実際のチェックボックスを非表示 */
}
.star-label {
    cursor: pointer;
    color: #ccc;
    transition: all 0.3s ease;
    display: inline-block;
}
/* 非アクティブ状態 */
.star-label i {
    transition: all 0.3s ease;
}
/* アクティブ状態 */
.star-checkbox:checked + .star-label i {
    color: #ffc107; /* 黄色の星 */
    text-shadow: 0 0 2px rgba(255, 193, 7, 0.7);
}


/**
 * b-form-radio のスタイル調整
 */

 /* ラジオボタンのinputがdisabledのとき、labelも薄くする */
input.custom-control-input:disabled + label.custom-control-label {
    color: #ccc;
    opacity: 1;  /* Bootstrapのopacity制御を無効化 */
}

/* label内のspanがある場合に直接spanに色を指定 */
input.custom-control-input:disabled + label.custom-control-label span {
    color: #ccc;
    opacity: 1;
}

/* ===========
   空きスケジュール検索用
   ========== */
.fss-container {
  margin-bottom: 1rem;
}

.fss-row {
  display: flex;
  align-items: flex-end; /* align-items-end */
}

.fss-group {
  padding-left: 1rem; /* pl-3 */
}

.fss-group-title {
  min-width: 250px;
}

.fss-required-mark {
  color: red;
  font-weight: bold;
  margin-left: 2px;
}

.fss-group-main-user {
  min-width: 150px;
}

.fss-group-participants {
  min-width: 200px;
  position: relative;
}

.fss-select-display {
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  background-color: #fff;
  cursor: pointer;
  width: 100%;
}

.fss-select-dropdown {
  position: absolute;
  top: 100%;
  width: 94%;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1050;
}

.fss-select-dropdown label {
  display: flex;
  align-items: center;
  padding: 0.3rem 1rem;
  margin: 0rem 0rem;
}

.fss-select-dropdown label:hover {
  background-color: #f0f0f0;
}

.fss-checkbox {
  margin-right: 0.5rem;
}