@charset "utf-8";
@media print {
	a[href]:after {
		content: "";
	}
	abbr[title]:after {
		content: "";
	}
}

.actions-top {
    margin-bottom: 10px;
}
.actions-bottom {
    margin-top: 5px;
    margin-bottom: 0px;
}

/* ユーザー－一覧 */
table thead tr .users-cd {
    width: 8rem;
}
table thead tr .users-name {
    width: 14rem;
}

.center {
    text-align: center;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}
.asc:after {
    content: " \2193";
}
.desc:after {
    content: " \2191";
}

form .required > label:after {
    border-radius: 0.25em;
    color: #fff;
    display: inline;
    font-size: 100%;
    font-weight: 700;
    line-height: 1;
    padding: 0.1em 0.5em;
    margin-left: 0.7em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
    background-color: #d9534f;
    content: '必須';
}

/*
assets\css\main\app.css 追記分
*/
    .widget-box.transparent>.widget-header {
        margin:0px 0px 12px 0;
    }
    
    .widget-box > .widget-header {
        border-radius: 4px 4px 0px 0px;
    }
    .widget-box.collapsed > .widget-header {
        border-radius: 4px 4px 4px 4px;
    }

    .widget-body {
        margin:0px 0px 16px 0;
    }

/* 詳細画面内ボックス表示設定 */
.widget-header-flat {
    padding-bottom: 9px;
    margin: 20px 0px 10px 100px;
    border-bottom: 1px solid rgb(191, 191, 191);
}

.widget-header-large > .widget-title {
    line-height: 48px}
.widget-header-small > .widget-title {
    line-height: 30px}

.widget-header > .widget-title {
    line-height: 36px;
    padding: 0;
    margin: 0;
    display: inline}
.widget-header > .widget-title > .ace-icon {
    margin-right: 5px;
    font-weight: 400;
    display: inline-block}

.range-font
{
    font-size: 20px !important;
    
}

/* 入力フォーム　ラベル */
@media (min-width: 768px) {
    .col-form-label{
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right;
    }
}
.wave
{
    text-align: center;
    font-weight: bold;
    font-size: large;
}

@media (min-width: 686px) {
}

.input-group-addon {
    cursor: pointer;
    align-items: center;
    background-color: #e6eef5;
    border: 1px solid #dce7f1;
    border-radius: .25rem;
    color: #526e8a;
    display: flex;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: .2rem .5rem;
    text-align: center;
    white-space: nowrap;
}

.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-addon {
    border-radius: .3rem;
    font-size: 1.25rem;
    padding: .5rem 1rem;
}

.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-addon {
    border-radius: .2rem;
    font-size: .875rem;
    padding: .25rem .5rem;
}

.class-holiday {
    color: red !important;
}
.class-sunday {
    color: red !important;
}
.class-saturday {
    color: blue !important;
}
.input-group.search .input-group-addon.action {
    cursor: hand;
    cursor:pointer;
}
.input-group.search > .input-group-addon.code {
    border: 0px;
    padding: 0px;
    background-color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.hidden {
    display: none;
}


.form-group input.picker {
    background: lightyellow;
}

/* datepickerの色調整 */
.form-group input.datetimepicker-input {
    background: lightyellow;
}
.form-group input.datetimepicker-input:disabled {
    background-color: #e9ecef;
}
/* datepickerの角丸調整 */
.form-group input.datetimepicker-input {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
.form-group input.datetimepicker-input:disabled {
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.input-group.search > .input-group-addon.code > * {
    width: 5.5rem
}

div.modal-dialog.modal-lg > div.modal-content{
    height:750px;
    width :1000px;
}

    /* ポップアップヘルプ（管理側の調整） */
div.mywp-popup-help > div.modal > div.modal-dialog > div.modal-content {
    align-items: center;
    color: #212529;
    font-size: 20px;
    text-align: left;
}
div.mywp-popup-help > div.modal > div.modal-dialog > div.modal-content > div.modal-header{
    font-size: 20px;
}
div.mywp-popup-help > div.modal > div.modal-dialog > div.modal-content > div.modal-header > h5.modal-title{
    font-size: 20px;
    display: inline-block;
}
div.mywp-popup-help > div.modal > div.modal-dialog > div.modal-content > div.modal-body{
    font-size: 16px;
}

div.mywp-popup-help > div.modal > div.modal-dialog > div.modal-content > div.modal-footer{
    text-align: right;
}

.datepicker-days th.dow:first-child, .datepicker-days td:first-child, .datepicker-days td.public-holiday {
    color: #f00;
}
.datepicker-days th.dow:last-child, .datepicker-days td:last-child {
    color: #00f;
}
.datepicker-days td.day.old, .datepicker-days td.day.new {
    color: #999;
}
.datepicker-days td.day.disabled {
    color: #ccc;
}

/* フォームコントロール類の幅調整(70%)*/
.style70 .form-control,
.style70 .form-select,
.style70 .input-group-text {
    width: 70%;
}

/* フォームコントロール類の幅調整(50%)*/
.style50 .form-control,
.style50 .form-select,
.style50 .input-group-text {
    width: 50%;
}

/* change-requests 差異あり項目 */
.chgreq-diff-fields-edit {
    border-color: red !important;
    background-color: lightyellow !important;
}
.chgreq-diff-fields-view {
    border-color: red !important;
}


/* テーブル全体のボーダー設定（ヘッダー以外） */
.table-bordered>:not(caption)>* {
    border-width: 0;
}
.table-bordered>:not(caption)>*>* {
    border-width: 0;
}
.table-bordered tbody td {
    border: 1px solid #c2c2c2a2;
}
/* テーブルのマウスオーバー色をアイコンカラーに設定 */
.table-hover-blue>tbody>tr:hover>* {
    --bs-table-accent-bg: #c0ebf7;
}
.table-hover-red>tbody>tr:hover>* {
    --bs-table-accent-bg: #ffd6d5;
}
.table-hover-green>tbody>tr:hover>* {
    --bs-table-accent-bg: #bef0e1;
}
.table-hover-purple>tbody>tr:hover>* {
    --bs-table-accent-bg: #9694ff;
    color: #ffffff;
}
/* table内のthの文字列に位置をセンターに設定 */
table.table > thead > tr > th {
    text-align: center;
}
/* table内のtdの文字列に位置をセンターに設定 */
table.table > tbody > tr > td {
    text-align: center;
}
/* table内のtdの文字列に位置を左揃えに設定 */
table.table > tbody > tr > td.text-left {
    text-align: left;
    padding-left: 20px;
}
/* テーブルのセルのパディング */
.table-cell-padding th, .table-cell-padding td {
    padding: 0.1rem;
}

/* 保守切れの得意先、ステータスが無効のユーザー  赤文字で表示 */
.expired-support td {
    color: red !important;
}

/* datetimepickerのカレンダーの位置を左に調整 */
.bootstrap-datetimepicker-widget {
    left: 0 !important;
    width: 400px !important;
}

/* アローヘッドの左位置を調整 */
.bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
    left: 8px !important;
    right: auto !important;
}
.bootstrap-datetimepicker-widget.dropdown-menu.float-right:before {
    left: 7px !important;
    right: auto !important;
}

/* 水平メニュー 左部メニューのある項目の下矢印（Ⅴ）を非表示 */
.layout-horizontal .main-navbar ul .menu-item.has-sub .menu-link:after {
    content: none !important;
}

/*
外部向け画面・ログイン画面のINPUTのレイアウト調整
各項目に、'class' => "form-control-xl input-blue-bk"と書いた場合と同等の設定
*/
body.Users.login input.form-control,
body.ChangeRequests.welcome input.form-control,
body.ChangeRequests.login input.form-control,
body.ChangeRequests.input input.form-control,
body.ChangeRequests.check input.form-control,
body.ChangeRequests.end input.form-control,
body.ChangeRequests.mailConfirm input.form-control,
body.NewRequests.welcome input.form-control:not(:disabled),
body.NewRequests.input input.form-control,
body.NewRequests.check input.form-control,
body.NewRequests.end input.form-control,
body.NewRequests.mailConfirm input.form-control{
    font-size: 1rem;
    padding: .5rem .75rem;
    margin-bottom: 0.4rem;
}
body.Users.login input.form-control:not(:disabled),
body.ChangeRequests.welcome input.form-control:not(:disabled),
body.ChangeRequests.login input.form-control:not(:disabled),
body.ChangeRequests.input input.form-control:not(:disabled),
body.ChangeRequests.check input.form-control:not(:disabled),
body.ChangeRequests.end input.form-control:not(:disabled),
body.ChangeRequests.mailConfirm input.form-control:not(:disabled),
body.NewRequests.welcome input.form-control:not(:disabled),
body.NewRequests.input input.form-control:not(:disabled),
body.NewRequests.check input.form-control:not(:disabled),
body.NewRequests.end input.form-control:not(:disabled),
body.NewRequests.mailConfirm input.form-control:not(:disabled) {
    background-color: #E8F0FE;
}
/* 外部向け確認画面  戻る・登録ボタンの横幅 */
.wide-button {
    width: 49%;
}
/* 外部向け画面 ボタンの下に余白を追加*/
.mt-custom {
    margin-bottom: 150px;
}
/* 外部向け画面 新規申込 ラジオボタン ボタンと文字サイズを大きく*/
.radio-fs1rem {
    font-size: 1rem;
}

/* 外部向け画面 変更依頼-ログイン画面 新規申込ボタン*/
.cr-nrbtn {
    background: linear-gradient(90deg, #ff924f 0%, #f87538 100%);
    color: #fff;
    padding: 0.7rem 1.5rem;
    border-radius: 0.4rem;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(248,117,56,0.10);
    transition: background 0.2s, transform 0.1s;
    border: none;
    outline: none;
    display: inline-block;
}
.cr-nrbtn:hover {
    background: linear-gradient(90deg, #ffb07c 0%, #ff924f 100%);
    color: #fff;
    transform: scale(1.04);
}
.cr-nrbtn-area {
    background: #fff7f0;
    border: 2px solid #f87538;
    border-radius: 0.7rem;
    padding: 1.2rem 0.5rem;
    margin: 1.5rem 0;
    text-align: center;
}
.cr-nrbtn-area strong {
    font-size: 1.05rem;
    color: #f87538;
    margin-bottom: 0.7rem;
    display: block;
}
/* 外部画面：変更依頼-ログイン画面 新規申込カード用 */
.cr-entry-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin: 2.5rem 0 2rem 0;
}
.cr-entry-card {
    flex: 1 1 320px;
    max-width: 400px;
    min-width: 260px;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    transition: box-shadow 0.2s;
}
.cr-entry-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
}
/* 外部画面：変更依頼-ログイン画面  タイトル（色は好きに指定） */
.cr-entry-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1.2rem;
    letter-spacing: 0.02em;
}
/* 外部画面：変更依頼-商品選択画面 各ボタン */
.welcome-btn-blue {
    background: linear-gradient(90deg, #5bc0ff 0%, #339cff 100%);
    color: #fff !important;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0.7rem 0;
    box-shadow: 0 2px 8px rgba(91,192,255,0.10);
    transition: transform 0.1s;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}
.welcome-btn-blue:hover {
    color: #fff !important;
    transform: scale(1.04);
    text-decoration: none;
}
.welcome-btn-green {
    background: linear-gradient(90deg, #58d6a4 0%, #2ec28c 100%);
    color: #fff !important;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0.7rem 0;
    box-shadow: 0 2px 8px rgba(52,211,153,0.10);
    transition: transform 0.1s;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}
.welcome-btn-green:hover {
    color: #fff !important;
    transform: scale(1.04);
    text-decoration: none;
}

/* 拡張情報のグループタイトルと区切り線のスタイル */
.group-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 25px 0 8px 100px; 
    border: 0; 
    padding: 0; 
}

.group-divider {
    border: 0; 
    margin: 8px 0 8px 100px; 
    padding: 0; 
}

/* 拡張情報フィールドのスタイル調整 */
#extension-info-container .form-group {
    margin-bottom: 0.5rem;
}

#extension-info-container .col-form-label {
    font-weight: 500;
    color: #495057;
}

#extension-info-container .form-control {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

#extension-info-container .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#extension-info-container .form-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* 拡張情報定義テーブルのグループ行背景色 */
.group-row-background {
    background-color: lightcyan !important;
}

.group-row-background td {
    background-color: lightcyan !important;
}

.group-row-background input,
.group-row-background select,
.group-row-background textarea {
    background-color: lightcyan !important;
}