/***************
基本設定：変更不要
Spochaロゴ
Big Shoulders Display　SIL Open Font License
***************/
/*Varidation style Reset*/
.form-control:invalid,.form-control:valid{
  border-color: rgb(231, 232, 236) !important;
}

/*Font*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
html,body{font-family: 'Noto Sans JP', sans-serif;}

/*ローディング*/
.pace .pace-activity, .pace .pace-activity:before{
  border-color: #dc016a transparent transparent !important;
}
.pace {
left: 50vw !important;
right: 50vw !important;
}
.progress_mask{
  background: rgba(255,255,255, 0.3) !important;
  backdrop-filter: blur(3px);
}
/*スクロールバー*/
.table-bordered{border: inherit !important;}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background-color: #fbfbfb;
  border-radius: 100px;
}
::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: #999999;
}
/*/スクロールバー*/

/*ページネーション*/
.page-link {
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.1);
    color:#666666;
}
/*/ページネーション*/

/*************************
カラー
**************************/
.login-box button,.navbar-white,
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus,
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link.active,
.page-item.active .page-link,.bg-gradient-info,.btn-info
 {
background: linear-gradient(144deg, rgba(62,132,255,1) 0%, rgba(0,98,208,1) 100%) !important;
}

/*ボタン*/
.btn-info{border:none;}
.btn-info:hover{border:none;background: rgba(0,0,0,0.8) !important;}
/*********************
サイドバー
*********************/
.main-sidebar{
  background-color: #f4f4f4;
}
[class*=sidebar-dark-] .sidebar a,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link{
  color: #000000;
  font-size: 12px;
}
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:hover{
  color: #999999;
}
[class*=sidebar-dark-] .nav-header{
  color: #000000;
  font-weight: 900;
}

/***********************
ログインページ
*********************/
.login-box{
display: flex;
width: 100%;
height: 100vh;
overflow-y: hidden;

}
.login-logo{
width: 40%;
order:2;
background-image: url(https://reward.msys.cloud/images/bg_overlay.jpg);
background-size: cover;
height: 100vh;
}

.login-logo + .card-primary{
width: 60%;
height:100vh;
order:1;
border-radius: inherit !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fbfbfb;
}

.login-logo + .card-primary .login-card-body{
width:60%;
margin: 0 auto;
height:300px;
flex:inherit;
align-self: center;
box-shadow: 0 3px 3px rgba(0,0,0,0.3);
border-radius: 10px;
}
.login-logo + .card-primary .login-card-body:before{
content:"";
display: block;
margin:0 auto;
width:300px;
height:100px;
background-image: url(https://reward.msys.cloud/images/spocha_system_large_b_logo.png);
background-size: contain;
background-repeat: no-repeat;

}
.login-page .card-header h3{display:none;}

.login-logo + .card-primary .login-card-body label[for="remember"]{color:#000000;font-weight:400 !important;font-size:13px;}
.login-logo + .card-primary .login-card-body button[type="submit"]{border-radius: 5px;box-shadow: 0 3px 3px rgba(0,0,0,0.3)}
/*ログイン*/
.login-page .login-logo img[height="50"]{display:none;}

.login-page .card-primary.card-outline{border-top:none !important;}

.login-page .card-footer {display:none;}
body.login-page {
  background: linear-gradient(148deg, rgba(75,94,108,1) 0%, rgba(24,19,31,1) 100%);
}

/*
.login-box{
display:flex;
width:100%;
}
.login-logo{
width:50%;
}
.login-logo + .card-primary{
width:50%;
}
*/
.login-box button{border:inherit;border-radius:2px;}

.form-control:focus,.login-card-body .input-group .form-control:focus~.input-group-append .input-group-text, .register-card-body .input-group .form-control:focus~.input-group-append .input-group-text{
border-color: #7695ac!important;
}

.logo_image {
    width: 400px !important;
    /*margin-left: -120px;*/
    margin-top: 200px;
}

.page-item.active .page-link{border-color:inherit !important;}

/**************************
ヘッダー
**************************/
.main-header.navbar{
  height: 50vh;
  display: flex;
  align-items: flex-start;
   z-index: 98;
}
.navbar-nav>.user-menu>.dropdown-menu{
z-index: 9999;
}
.brand-link .brand-image-xs {
  max-height: 40px !important;
}
.brand-image.img-circle.elevation-3.logo-xs{box-shadow:inherit !important;}

/*.logo-xl.brand-image-xs, .logo-xs.brand-image-xs {
  left: 45px;
}
*/
.brand-link .brand-image {
    margin-left: .4rem !important;
}
[class*=sidebar-dark] .brand-link{
border-bottom: inherit;
}
/******************************
コンテンツ
*****************************/
.content-wrapper{
  background-color: #ffffff;
 }

.content-wrapper .content{
  position: relative;
    z-index: 1059;
    margin-top: -300px;
    width: 100%;
  }

/***************************
CARD
***************************/
/*CARDヘッダー*/

.card-header{
  font-size: 25px;
  font-weight: 900;
  border-bottom: inherit !important;
  background-color: inherit !important;
  border-radius: 10px !important;
}
.card-header::after{
  content:"";
  height:1px;
  background-color: rgb(231, 232, 236);
  display: block;
  margin-top: 50px;
}
/*CARD*/
.card{
  box-shadow: rgb(15 35 70 / 15%) 0px 3px 6px 0px !important;
  border-radius: 10px !important;
}
/*/CARD*/



.card-title{font-size: 25px;font-weight: bold;}
.card-title:before{
  content: "\f022";
  font-family: "Font Awesome 5 Free";
  margin-right:5px
  }
/*/CARDヘッダー*/

/*CARD オーバーレイ*/
#detail_div{
  z-index: 9999 !important;
  width:100% !important;
  margin-top: -50px !important;
}
/*/CARD オーバーレイ*/



/*******************
フォームカスタム
*******************/
.form-control,
.select2-container--default .select2-selection--single{
  border:3px solid rgb(231, 232, 236);
  font-size: 13px;
  font-weight: 700;
}
/*フォーカス時の色*/
.form-control:focus{
  border-color: rgb(198, 199, 206) !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single{
  border-color: rgb(198, 199, 206) !important;
}

/*カスタムセレクト*/
.select2-container--default .select2-selection--single .select2-selection__rendered{
line-height: inherit !important;
margin-top: inherit !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover{
background-color:#343a40 !important;
}
.select2-results__options li{
  font-size: 12px !important;
}


/*日付*/
#month_base{position: relative;}
#month_base:before{
  font-family: "Font Awesome 5 Free";
  content:"\f073";
  position: absolute;
  top:7px;
  left:10px
}

/*Datepicker*/
.datepicker table th{background-color: inherit;}

/*サーチエリア*/
.dataTables_filter label{
  color:#ffffff;
  position: relative;
}
.dataTables_filter label:before{
  font-family: "Font Awesome 5 Free";
  content:"\f002";
  font-weight: bold;
  color:#333333;
  position: absolute;
  left:50px;
  top:3px
}
div.dataTables_wrapper div.dataTables_filter input{
  text-indent: 15px;
}

#month_base #month_picker{text-indent: 15px;}
/*ボタン*/
#close_btn{
  line-height: 30px;
  border-radius: 100%;
  width:40px;
-webkit-animation: heartbeat 1.5s ease-in-out 3s infinite both;
animation: heartbeat 1.5s ease-in-out 3s infinite both;
}
#btn_detail_exp,#btn_export{
  margin-top: 5px;
  background-color: #343a40;
  border-color:#343a40;
  box-shadow: 0px 3px 0px #999999;
}

#btn_import
{
  margin-top: 5px;
  background-color: #ffc107;
  border-color:#ffc107;
  box-shadow: 0px 3px 0px #806003;
}

#btn_apply
{
  margin-top: 5px;
  background-color: #dc3545;
  border-color:#dc3545;
  box-shadow: 0px 3px 0px #682028;
}


/*/フォームカスタム*/
/*MODAL*/
.modal.show{background: rgba(0,0,0,0.5);}

/*****************************
table調整
*******************************/
tabel,th,td{font-size:12px !important;vertical-align: middle !important;}
/*reset*/
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting
{
  padding-right:inherit !important;
}
table.dataTable tfoot>tr>th
{
  padding-left: 1px !important;
  padding-right: 3px !important;
}
/*Sortボタン*/
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after{
  bottom:0;
  font-size: 10px;
}

/*Checkbox*/
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after{
  font-size: 10px  !important;
  margin-top: -4px !important;
  color:#0066cc !important;
  font-weight: bold !important;
}

tbody tr:nth-child(even){background-color: #ffffff;}
tbody tr:nth-child(odd) {background-color: #fbfbfb;}

th.calc,td.calc,
th.system,td.system{background-color: inherit !important;}
th.adnw{background-color: rgba(255, 227, 206,0.6) !important;}
td.adnw{background-color: rgba(255, 227, 206,0.3) !important;}

th.mobee2{background-color: rgba(255, 237, 249,0.6) !important;}
td.mobee2{background-color: rgba(255, 237, 249,0.3) !important;}

.fa-chart-bar{color:#333333 !important;}


thead tr{
  position:sticky;
  top:0;
  background-color: #f7f7f7;

}


.table thead th{border-bottom: inherit !important;}

.table-bordered td, .table-bordered th{
  border: inherit !important;
  }
.table-bordered td, .table-bordered th:not(:last-child) {

border-right: 2px solid #ffffff !important;
}
.table-responsive{
overflow-x: hidden !important;

}



/* ----------------------------------------------
 * Generated by Animista on 2022-1-6 15:11:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}