@charset "utf-8";
/*======================================================================
  従業員ページ用 CSS
========================================================================*/
/*** 全体 ***/
* {
  /* font-family: Verdana, Roboto, "Droid Sans", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif !important; */
  font-weight: normal !important;
  text-shadow: none !important;
}
@keyframes flash {
  0%,100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
  color: #38c;
}
.login_main {
    position: relative;
}
.login_page .login_image {
    text-align: center;
    color: #FFFFFF;
}
.login_page .login_forgot,
.login_page .app_install {
    text-align: center;
}
#login_email {
  margin-bottom: 8px;
}
.login_main input[type=submit] {
  margin-bottom: 8px;
}
.ui-dialog {
  background: #FBF7ED !important;
}
.ui-content {
  max-width: 500px;
  padding: 15px;
  padding-top: 0;
  margin: 0 auto;
}
.ui-content li {
  text-align: center;
  margin-top: 8px;
}
.ui-content .ui-content-heading,
.ui-content .checkbox {
  margin-bottom: 10px;
}
.ui-content .checkbox {
  font-weight: normal;
}
.ui-content .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.ui-content .form-control:focus {
  z-index: 2;
}
.ui-content input[type="email"] {
  margin-bottom: -1px;
}
.ui-content input[type="text"] {
  margin-bottom: -1px;
}
.ui-content input[type="password"] {
  margin-bottom: 10px;
}
.ui-hide-label label {
  position: absolute!important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  display: block;
  margin: 0 0 .4em;
}
.ui-block-a legend {
  margin-bottom: 8px;
  font-size: 16px;
}
.ui-field-contain>label, .ui-field-contain .ui-controlgroup-label, .ui-field-contain>.ui-rangeslider>label {
  float: left;
  width: 100%;
  margin: .5em 2% 0 0;
}
.ui-header {
  border-width: 0;
}
.ui-footer {
  border-bottom: none;
  border-color: #ccc;
}
input[type="submit"].ui-btn {
  width: 100%;
}

/* 画面共通
----------------------------------------------- */
/* 全体 */
.staffpage {
  background-color: #fbf7ed !important;
  margin: 0 auto;
  width: 414px;
}
.staffpage .h2, .staffpage h2 {
  font-size: 24px;
  margin-top: 0;
}
/* ヘッダー */
.staffpage-header {
  border: none;
  width: 414px;
  margin-top: 2px;
}
.staffpage-header .ui-grid-b {
  width: 100%;
  background-color: transparent !important;
  height: 36px;
}
.staffpage-header .header_logo {
  width: 20%;
  padding: 3px 0;
  text-align: center;
  visibility: hidden;
}
.staffpage-header .header_name {
  width: 60%;
  padding: 5px 0;
  text-align: center;
  border-right: 2px solid #fd881c;
  font-size: 1em;
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  visibility: hidden;
}
.staffpage-header .header_name ul {
  height: 36px;
}
.staffpage-header .header_menu {
  width: 20%;
  text-align: center;
}
.staffpage-header .header_menu .header_logout {
  width: 100%;
  margin: 0;
  background-color: #fabe28;
  border: none;
  color: #000;
  height: 36px;
  display: none;
}
.staffpage-header .header_menu .header_back {
  width: 100%;
  margin: 0;
  background-color: #fff;
  border-radius: 4px;
  color: #000;
  height: 36px;
  padding: 0;
  padding-left: 16px;
  line-height: 36px;
}
.staffpage-header .header_menu .header_back.ui-btn-icon-top:after {
  left: 6px;
  top: 6px;
  margin: 0;
}
/* 説明欄 */
.staffpage-discription {
  border-top: 1px solid #000;
  background-color: #e9e9e9;
  color: #333;
  text-align: center;
  font-size: .95em;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
.staffpage-discription.light {
  background-color: #f7f6f5;
  color: #333;
}
.staffpage-discription.enabled {
  background-color: #ffdb4f;
  color: #333;
}
.staffpage-discription.disabled {
  background-color: #e9e9e9;
  color: #777;
}
.staffpage-discription.light.line-end,
.staffpage-discription.enabled.line-end,
.staffpage-discription.disabled.line-end,
.staffpage-discription.line-end {
  border-bottom: 1px solid #000;
}
.staffpage-discription .ui-grid-a .ui-block-b {
  border-left: 1px solid #000;
}

/* 設定画面
----------------------------------------------- */
.setting-header {
  text-align: center;
}
.setting-footer {
  text-align: center;
}
.setting-footer .ok {
  min-width: 120px;
  width: 45%;
  background-color: #ff003c;
  color: #fff;
}
.setting-footer .cancel {
  min-width: 120px;
  width: 45%;
  margin-right: 0;
}
/* ラジオボタン２択
----------------------------------------------- */
.radio-2choices .ui-controlgroup-controls {
  width: 100%;
}
.radio-2choices .ui-radio {
  width: 50%;
}
.radio-2choices .ui-radio > label {
  text-align: center;
}
.radio-2choices .ui-radio > label.wrap {
  padding: 4px;
  line-height: 18px;
}
.radio-2choices {
  width: 100%;
  margin-bottom: 8px;
}
/*↓↓↓ PCのみ有効 ↓↓↓*/
.radio-2choices input[type=radio] {
  display: none;
}
.radio-2choices label {
  display: block;
  float: left;
  margin: 0;
  width: 50%;
  padding: 16px 12px 12px 16px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  background-color: #f6f6f6;
  border: 1px solid #ddd;
  color: #333;
}
.radio-2choices label:nth-child(2),
.radio-2choices label:nth-child(3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.radio-2choices label:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.radio-2choices input[type=radio]:checked + label {
  background-color: #38c;
  border-color: #38c;
  color: #fff;
}
/*↑↑↑ PCのみ有効 ↑↑↑*/
/* ダイアログボックス関連
----------------------------------------------- */
/*↓↓↓ PCのみ有効 ↓↓↓*/
.staffpage-popup {
  display: none;
}
.staffpage-popup.ui-dialog-content {
  overflow: hidden;
  padding: 0 !important;
}
/*↑↑↑ PCのみ有効 ↑↑↑*/
.staffpage-popup .ui-header div,
#staffpage-messagebox .ui-header div {
  min-width: 248px;
  text-align: left;
  font-size: 14px;
  min-height: 1.1em;
  padding: .7em .4em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  outline: 0 !important;
  margin: 0.5px 1px 0 0.5px;
  border-top-left-radius: .3125em;
  border-top-right-radius: .3125em;
}
.staffpage-popup .ui-header div {
  text-align: center;
  font-size: 20px;
  padding: 4px 8px;
  background-color: #3a4652;
  color: #fff;
}
#staffpage-messagebox .ui-header div.info,
#staffpage-messagebox .ui-header div.confirm {
  background-color: #3a4652;
  color: #fff;
}
#staffpage-messagebox .ui-header div.error,
#staffpage-messagebox .ui-header div.alert {
  background-color: #fabe28;
}
.staffpage-popup .ui-content  {
  padding: 8px 8px 2px 8px;
}
#staffpage-messagebox .ui-content {
  padding: 8px;
}
.staffpage-popup .ui-content .error-message {
  margin-top: 2px;
  min-width: 230px;
  width: inherit;
  height: 28px;
  color: #ff003c;
  font-size: 14px;
  line-height: 14px;
  overflow: hidden;
}
.staffpage-popup .ui-content .disabled-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: .8;
}
.staffpage-popup .ui-footer,
#staffpage-messagebox .ui-footer {
  text-align: center;
  background-color: transparent;
}
.staffpage-popup .ui-footer .ui-btn,
#staffpage-messagebox .ui-footer .ui-btn {
  min-width: 248px;
  font-size: 16px;
  margin-left: 8px;
  margin-right: 8px;
}
.staffpage-popup .ui-footer .ok.ui-btn,
#staffpage-messagebox .ui-footer .ok.ui-btn {
  min-width: 120px;
  background-color: #ff003c;
  color: #fff;
  margin-right: 4px;
}
.staffpage-popup .ui-footer .cancel.ui-btn,
#staffpage-messagebox .ui-footer .cancel.ui-btn {
  min-width: 120px;
  margin-left: 4px;
}
.staffpage-popup .ui-footer .okonly.ui-btn,
#staffpage-messagebox .ui-footer .okonly.ui-btn {
  min-width: 120px;
  background-color: #ff003c;
  color: #fff;
}
.staffpage-popup .ui-footer .cancelonly.ui-btn,
#staffpage-messagebox .ui-footer .cancelonly.ui-btn {
  min-width: 120px;
}
/* バッジ表示
----------------------------------------------- */
.badge-count {
  background-color: #ff003c;
  color: #fff;
  border-radius: 16px;
  font-size: 12px;
  padding: 0 4px 1px 4px;
  margin-left: 8px; 
}
/* スクロールバー表示
----------------------------------------------- */
.smartphone-scroll-x {
  overflow-x: auto;
}
.smartphone-scroll-x::-webkit-scrollbar {
  height: 10px;
}
.smartphone-scroll-x::-webkit-scrollbar-track {
  margin: 0 2px;
  background: #ccc;
  border-radius: 5px;
}
.smartphone-scroll-x::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #3a4652;
}
.smartphone-scroll-y {
  overflow-y: auto;
}
.smartphone-scroll-y::-webkit-scrollbar {
  width: 10px;
}
.smartphone-scroll-y::-webkit-scrollbar-track {
  margin: 0 2px;
  background: #ccc;
  border-radius: 5px;
}
.smartphone-scroll-y::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #3a4652;
}
/* アイコン表示
----------------------------------------------- */
.small-icon.ui-btn-icon-notext:after {
  width: 19px;
  height: 19px;
}
.small-icon-nodisc.ui-btn-icon-notext:after {
  background-color: transparent;
  width: 19px;
  height: 19px;
}
.normal-icon-nodisc.ui-btn-icon-notext:after {
  background-color: transparent;
}
/* 通知既読管理画面
----------------------------------------------- */
.push-management .push_box {
  position: relative;
  height : 80px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  background-color: #fcfcfc;
  border-color: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.push-management .push_box .push_date_text {
  height: 14px;
  line-height: 14px;
  margin-right: 50px;
  font-size: 13px;
  color: #999;
}
.push-management .push_box .push_subject {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 50px;
}
.push-management .push_box .read_box {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 50px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  background-color: #2680c4;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 2px;
}
.push-management .push_box .read_box.read {
  color: #333;
  background-color: #f6f6f6;
  border-color: #ddd;
  border-width: 1px;
  border-style: solid;
}
.push-management .push_box .push_body {
  height: 50px;
  overflow: hidden;
  position: relative;
}
.push-management .push_box .push_body p {
  line-height: 23px;
  font-size: 14px;
  white-space: pre;
}
.push-management .push_box .push_body .ellipsis {
  position: absolute;
  bottom: 4px;
  right: 3px;
  width: 22px;
  text-align: center;
  color: #333;
  background-color: #fff;
}
.push-detail-date {
  font-size: 13px;
  color: #999;
}
.push-detail-subject {
  color: #333;
}
.push-detail-body {
  color: #333;
  margin-top : 10px;
  font-size: 14px;
  overflow: inherit;
  overflow-wrap: break-word;
  white-space: break-spaces;
}
/* シフト申請画面
----------------------------------------------- */
.staffpage-index.ui-content {
  padding: 0.5em;
  padding-top: 4px;
}
/*↓↓↓ PCのみ有効 ↓↓↓*/
.staffpage-index-width {
  max-width: 650px;
  width: 650px;
}
/*↑↑↑ PCのみ有効 ↑↑↑*/
.staffpage-index-date-from-to.ui-block-a {
  position: relative;
  margin-bottom: 4px;
}
.staffpage-index-date-from-to.ui-block-a .text {
  text-align: center;
  background-color: #3a4652;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 2.5em;
  line-height: 40px;
  font-size: .88em;
}
.staffpage-index-date-from-to.ui-block-a button {
  background-color: transparent;
  border: none;
  width: 48px;
  border-radius: 2.5em;
  position: absolute;
  top: 0;
  margin: 0;
  height: 100%;
}
.staffpage-index-date-from-to.ui-block-a button:active,
.staffpage-index-date-from-to.ui-block-a button:focus,
.staffpage-index-date-from-to.ui-block-a button:hover,
.staffpage-index-date-from-to.ui-block-a button:visited {
  background-color: #3a4652;
}
.staffpage-index-date-from-to.ui-block-a button.ui-icon-arrow-l {
  left: 0;
}
.staffpage-index-date-from-to.ui-block-a button.ui-icon-arrow-r {
  right: 0;
}
.staffpage-index-contact.ui-btn,
.staffpage-index-contact.ui-btn:active,
.staffpage-index-contact.ui-btn:focus,
.staffpage-index-contact.ui-btn:hover,
.staffpage-index-contact.ui-btn:visited {
  background-color: #0f0;
  color: #333;
  border: 1px solid #ddd;
  font-size: 14px;
  margin-top: 2px;
  display: none;
}
.staffpage-index-copy.ui-btn,
.staffpage-index-copy.ui-btn:active,
.staffpage-index-copy.ui-btn:focus,
.staffpage-index-copy.ui-btn:hover,
.staffpage-index-copy.ui-btn:visited {
  background-color: #2a4073;
  color: #fff;
  border: 1px solid #ddd;
  font-size: 14px;
  margin-top: 0;
  height: 42px;
}
.staffpage-index-copy > div.sub {
  display:none;
}
.staffpage-index-page {
  text-align: center;
  display: none;
}
/*↓↓↓ PCのみ有効 ↓↓↓*/
.staffpage-index .ui-grid-a .ui-block-a.week-list,
.staffpage-index .ui-grid-a .ui-block-b.week-list {
  float: none;
  clear: left;
  width: 100%;
}
.staffpage-index .ui-grid-a .ui-block-a.week-list > .ui-grid-a.days-list,
.staffpage-index .ui-grid-a .ui-block-b.week-list > .ui-grid-a.days-list {
  float: left;
}
/*↑↑↑ PCのみ有効 ↑↑↑*/
.staffpage-index-date.ui-block-a {
  padding: 0 1.5px 0 1.5px;
  width: 90px;
  float: none;
}
.staffpage-index-date.ui-block-a button,
.staffpage-index-date.ui-block-a button:active,
.staffpage-index-date.ui-block-a button:focus,
.staffpage-index-date.ui-block-a button:hover,
.staffpage-index-date.ui-block-a button:visited {
  margin: 0;
  padding: 0;
  height: 30px;
  line-height: 1em;
  background-color: #3a4652;
  border: none;
  color: #fff;
  opacity: 1;
  font-size: 15px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.staffpage-index-date.ui-block-a button.show_others,
.staffpage-index-date.ui-block-a button.show_others:active,
.staffpage-index-date.ui-block-a button.show_others:focus,
.staffpage-index-date.ui-block-a button.show_others:hover,
.staffpage-index-date.ui-block-a button.show_others:visited {
  padding-left: 8px;
}
.staffpage-index-date.ui-block-a button.show_others .ui-btn-icon-left {
  position: absolute;
  top: 12px;
  left: -7px;
  display: block;
}
.staffpage-index-date.ui-block-a button.show_others:disabled .ui-btn-icon-left {
  display: none;
}
.staffpage-index-date.ui-block-a button.blank {
  background-color: #ccc;
}
.staffpage-index-date.ui-block-a button.non {
  background-color: #3a4652;
}
.staffpage-index-date.ui-block-a button.sat {
  background-color: #399ac9;
}
.staffpage-index-date.ui-block-a button.sun {
  background-color: #ff003c;
}
.staffpage-index-shift.ui-block-b {
  padding: 0 1.5px 4px 1.5px;
  width: 90px;
  float: none;
}
.staffpage-index-shift.ui-block-b button {
  margin: 0;
  padding: 0;
  padding-top: 3px;
  height: 38px;
  line-height: 1em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.15);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  border-color: #ccc;
  background-color: #d5e6d9;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.staffpage-index-shift.ui-block-b button:disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  opacity: 1;
}
.staffpage-index-shift.ui-block-b button.blank {
  background-color: #ccc;
}
.staffpage-index-shift.ui-block-b button.noupdate {
  background-color: #d5e6d9;
}
.staffpage-index-shift.ui-block-b button.update {
  background-color: #c1ff97;
}
.staffpage-index-shift.ui-block-b button.updated {
  background-color: #fcf;
}
.staffpage-index-shift.ui-block-b button.dayoff-desired {
  background-color: #ffa500;
}
.staffpage-index-shift.ui-block-b button.dayoff-paid {
  background-color: #fcf;
  color: #f00;
}
.staffpage-index-shift.ui-block-b .flexible01 {
    background: url(../img/icon/icon_flexible_01.png) right center no-repeat;
    background-repeat: no-repeat;
    background-position: 5% 8%;
}
.staffpage-index-shift.ui-block-b .flexible02 {
    background: url(../img/icon/icon_flexible_02.png) right center no-repeat;
    background-repeat: no-repeat;
    background-position: 5% 8%;
}
.staffpage-index-footer {
  height: 50px;
  padding: 0;
  border: none;
}
.staffpage-index-footer [class*=ui-block-]>button.ui-btn {
  height: 50px;
  width: 100%;
  margin: 0;
  font-size: 14px;
}
.staffpage-index-footer button.staffpage-index-footer-status {
  opacity: 1;
  border: none;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.staffpage-index-footer button.staffpage-index-footer-status.notapplied {
  background-color: #ff003c;
  color: #fff;
}
.staffpage-index-footer button.staffpage-index-footer-status.applied {
  background-color: #d3d3d3;
  color: #333;
}
.staffpage-index-footer button.staffpage-index-footer-status.fixed {
  background-color: #2680c4;
  color: #fff;
}
.staffpage-index-footer button.staffpage-index-footer-apply,
.staffpage-index-footer button.staffpage-index-footer-apply:active,
.staffpage-index-footer button.staffpage-index-footer-apply:focus,
.staffpage-index-footer button.staffpage-index-footer-apply:hover,
.staffpage-index-footer button.staffpage-index-footer-apply:visited {
  animation: flash 1s linear infinite;
  background-color: #ff003c;
  color: #fff;
  border: none;
  border-top: 1px solid #ccc;
}
.staffpage-index-footer button.staffpage-index-footer-apply:disabled {
  animation: none;
  background-color: #f9f9f9;
  color: #333;
}
.staffpage-index-footer button.staffpage-index-footer-cancel {
  animation: none;
  border: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  background-color: #3a4652;
  color: #fff;
}
#shift-apply-work .ui-grid-b .ui-block-a,
#shift-apply-work .ui-grid-b .ui-block-c {
  width: 47%;
}
#shift-apply-work .ui-grid-b .ui-block-b {
  width: 6%;
  line-height: 2.5;
}
#shift-apply-work .ui-grid-b .ui-block-a .ui-select,
#shift-apply-work .ui-grid-b .ui-block-c .ui-select {
  margin-top: 0;
  margin-bottom: 4px;
}
.shift-apply-holidayreason {
  position: relative;
}
.shift-apply-holidayreason textarea.ui-input-text.ui-textinput-autogrow {
  margin: 0;
  height: 103px !important;
  resize: none;
  overflow-y: scroll;
}
#shift-other .ui-header div.sat,
#shift-apply .ui-header div.sat {
  background-color: #399ac9;
}
#shift-other .ui-header div.sun,
#shift-apply .ui-header div.sun {
  background-color: #ff003c;
}
#shift-other .status {
  padding: 0px 3px;
  border: 1px solid #ccc;
}
#shift-other .status {
  padding: 0px 3px;
  border: 1px solid #ccc;
}
#shift-other .staff_row .staff_status.fix,
#shift-other .status.fix {
  background-color: blue;
  color: #fff;
}
#shift-other .staff_row .staff_status.temp,
#shift-other .status.temp {
  background-color: yellow;
  color: #333;
}
#shift-other .staff_row .staff_status.pend,
#shift-other .status.pend {
  background-color: #ccc;
  color: #333;
}
#shift-other .staff_row {
  border: 1px solid #999;
  border-top: none;
}
#shift-other .staff_row:first-child {
  border-top: 1px solid #999;
}
#shift-other .staff_row .staff_name {
  width: 50%;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left:3px;
}
#shift-other .staff_row .staff_status {
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  width: 10%;
  text-align: center;
}
#shift-other .staff_row .staff_shift {
  font-size: 12px;
  width: 40%;
  padding-left: 3px;
}
.shift-apply-flexibletype input[type=checkbox] {
  display: none; /* ラジオボタンを非表示にする */
}
.shift-apply-flexibletype label {
  display: block; /* ブロックレベル要素化する */
  float: left; /* 要素の左寄せ・回り込を指定する */
  margin: 0; /* ボックス外側の余白を指定する */
  width: 100%; /* ボックスの横幅を指定する */
  padding: 16px 12px 12px 16px;
  line-height: 16px;
  text-align: center; /* テキストのセンタリングを指定する */
  cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
  border-radius: 5px; /* 角丸を指定する */
  background-color: #f6f6f6;
  border: 1px solid #ddd;
  color: #333;
}
.shift-apply-flexibletype input[type=checkbox]:checked + label {
  background-color: #38c;
  border-color: #38c;
  color: #fff;
}