/* sarlib追加CSS 
   rrac -> sarlib 置換
*/

:root {
  --sarlib-orange: #FF6E00;
  --sarlib-orange-deep: #FF3700;
  --sarlib-text-orange: #ffa500;
  --sarlib-blue: #efefff;
  --sarlib-hd-grey: #808080;
}

h1 {
    font-size : 24px;
}
h2 {
    font-size : 20px;
    background-color: royalblue;
    color:white;
    text-align: center;
}
/* bootstrap4アラートの背景色をアプリケーションエラー背景色と同一にする */
.alert-danger {
    background-color: rgb(255, 228, 225)!important;
}
.sarlib-light-bg {
    background-color: #eaeff5!important;
}
hr.sarlib-hr {
    border-top: 1px solid #035fac
}

/* アプリケーションで使用する背景色 */
.sarlib-bg-pink {
    background-color: #fff0f5!important;
}
.sarlib-bg-green {
    background-color: #d6e9ca!important;
}
.sarlib-bg-gray {
    background-color: #dcdcdc!important;
}

/* エラー項目入力域の背景色 */
input.valid_err,
select.valid_err {
    background-color: rgb(255, 228, 225);
}
/* エラー項目ファイルリスト行の背景色 */
.file_valid_err {
    background-color: rgb(255, 228, 225);
}

/* ログインページ */
/* ログインページ：タイちゃん画像 */
.sarlib-login-mascot-img {
    margin-top: 1rem;
    max-width: 110px;
    position: relative;
}
.sarlib-login-mascot-img img {
    width: 100%;
}
.sarlib-login-mascot-img .image_title {
    position: absolute;
    color: #18084a;
    font-size:9px;
    bottom: -4px;
    right: 0;
}

/* 左サイドバー */
.sarlib-left-nav {
    background-color: var(--sarlib-blue);
}
.sarlib-left-nav .sarlib-navbar-top {
    text-align: center!important;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
/* 左サイドバー：ロゴ */
.sarlib-navbar-top img.logo-img {
    max-width: 134px;
}
/* 左サイドバー：タイちゃん画像 */
.sarlib-navbar-top .mascot-img {
    padding-top: 1rem;
    max-width: 90px;
    position: relative;
    margin:auto;
}
.sarlib-navbar-top .mascot-img img {
    width: 100%;
}
.sarlib-navbar-top .mascot-img .image_title {
    position: absolute;
    color: #18084a;
    font-size:9px;
    bottom: -4px;
    right: 0;
}
/* 左サイドバー：メニューリスト */
ul.sarlib-navbar-list {
    list-style-type: none;
    padding: 0.5rem 1.8rem;
    margin-bottom: 0;
    border-bottom: 1px solid #f5f5f5;
}
ul.sarlib-navbar-list li a {
    line-height: 2rem;
}
/* 左サイドバー：メニューリスト：サブメニュー */
ul.sarlib-navbar-list ul {
    list-style-type: none;
    padding-top:0.25rem
}
ul.sarlib-navbar-list ul li a {
    padding-left: 1rem;
    line-height: 2rem;
}
.nav.sarlib-navbar-list li a {
   color: #6f4456;
 }
.nav.sarlib-navbar-list a:hover {
 color: #471e47;
}
/* コンテナ */
.sarlib-container-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.sarlib-container {
    padding: 2rem;
    position: relative;
}
/* ページフッタ */
.sarlib-page-footer {
    margin-top: auto;
    height: 35px;
    background-color: var(--sarlib-hd-grey);
}

/* スライダーボタン */
.sarlib-btn-slider:hover {
    color: #fff;
    background-color: var(--sarlib-orange);
    border-color: var(--sarlib-orange);
}
.sarlib-btn-slider {
    color: white;
/*    background-color: transparent; */
    background-color: var(--sarlib-orange);
    background-image: none;
    border-color: var(--sarlib-orange);
    position:fixed;
    bottom: 14px;
    /* bottom: 58px; フッターあり */
    left:8px
}

/* datatablesのDOM変更に合わせて表示位置を調整  */
div.dataTables_wrapper div.dataTables_paginate {
    margin-top: -2rem;
}
div.dataTables_wrapper div.dataTables_length {
    margin-top: -2rem;
}
div.dataTables_wrapper div.dataTables_info {
    margin-top: -2rem;
}

/* datatablesの行間 */
.table th, .table td {
    padding: 0.5rem;
}
/* datatablesのストライプ */
.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(219, 195, 123, 0.05);
}
/* datatablesのカラム */
th.check_col,td.check_col {
    text-align: center;
    width:60px;
}
th.button_col,td.button_col {
    text-align: center;
    width:75px;
}

td.num_col {
    text-align: right
}
th.num_col_footer {
    text-align: right
}
td.center_col {
    text-align: center;
}

@media screen and (max-width:1024px){
    html{
        font-size: 0.7em;
    }
}
@media screen and (max-width:480px){
    html{
        font-size: 0.6em;
    }
}

/* open/closeアイコン */
/* 初期値：開く（＋を表示、－を非表示） */
.toggle_link .fa-plus-square {
    display:inline
}
.toggle_link .fa-minus-square {
    display:none
}
/* 閉じる：開く（＋を非表示、－を表示） */
.toggle_link.toggle_link_close .fa-plus-square {
    display:none
}
.toggle_link.toggle_link_close .fa-minus-square {
    display:inline
}

/* ローディング画像 */
#sarlib-loading-wrapper{
    background-color: rgba(233,236,239, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2100;
}
#sarlib-loading{
    position:fixed;
    border:3px solid #e9ecef;
    background-color:#fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2200;
    padding: 20px;
    width: 300px;
}
.sarlib-blue {
  background-color: var(--sarlib-blue);
}
.sarlib-orange {
  color: var(--sarlib-orange);
}
.sarlib-text-orange {
  color: var(--sarlib-text-orange);
}
.sarlib-bg-orange {
  background-color: var(--sarlib-orange);
}
.btn-sarlib {
  background-color: var(--sarlib-orange);
  color: white;
  border: 1px solid var(--sarlib-orange);
}
.btn-sarlib:hover {
  color: black;
  background-color: var(--sarlib-orange-deep) !important;
  border: 1px solid var(--sarlib-orange-deep) !important;
}
.btn-sarlib:active {
  color: black;
  background-color: var(--sarlib-orange-deep) !important;
  border: 1px solid var(--sarlib-orange-deep) !important;
}

/* ページヘッダ */
.navbar_header {
    margin-bottom: 0px;
    padding-left: 1rem;
    background-color: var(--sarlib-hd-grey);
}

body{overflow-x:hidden;} 

span.req_mark {
  color: #f00;
}


/* btn-dark を sarlibボタンに変更 */
.btn-dark {
    background: var(--sarlib-orange); /* ボタンの背景色 */
    color: white; /* ボタンのテキストの色 */
    border: 1px solid var(--sarlib-orange); 
}

.btn-dark:hover, .btn-dark:focus, 
.btn-dark:active, .btn-dark:active:focus, .btn-dark:active:hover, .btn-dark:active.focus,
.btn-dark.active, .btn-dark.active:focus, .btn-dark.active:hover, .btn-dark.active.focus,
.open > .dropdown-toggle.btn-dark, 
.open > .dropdown-toggle.btn-dark:hover,
.open > .dropdown-toggle.btn-dark:focus, 
.open > .dropdown-toggle.btn-dark.focus,
.btn-dark.disabled:hover, .btn-dark[disabled]:hover, fieldset[disabled] .btn-dark:hover,
.btn-dark.disabled:focus, .btn-dark[disabled]:focus, fieldset[disabled] .btn-dark:focus,
.btn-dark.disabled.focus, .btn-dark[disabled].focus, fieldset[disabled] .btn-dark.focus {
    background: var(--sarlib-orange-deep);  /* ボタンの上にポインタを持ってきたり、クリックしたりした時の背景色 */
    color: black; /* ボタンの上にポインタを持ってきたり、クリックしたりした時のテキストの色 */
    border: 1px solid var(--sarlib-orange); 
}

.btn-dark.outline {
    border: 3px solid blue; /*アウトラインのみのボタンの線の色 */
    color: white; /* アウトラインのみのボタンのテキストの色 */
}

/* validationではない常時表示する注意書きテキストのスタイル */
.assert-message {
    color: #f00;
    font-weight: bold;
}

/* ----- 社内向け課題管理表のNo.247の対応　ここから ----- */
/* aタグに、href属性がついていることで、別タブで開くとエラーが発生する状況でした。（報告受付詳細、請求管理詳細のページ） */
/* 対象aタグからhref属性を削除するだけだと、colorの設定が消えてしまったので追加しています。 */
/* リンク（hrefなし）のスタイル */
a[onclick]:not([href]) {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
    cursor: pointer;
}
a[onclick]:not([href]):hover {
    color: rgba(var(--bs-link-hover-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
}
/* ----- 社内向け課題管理表のNo.247の対応　ここまで ----- */