@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100% !important;
  }
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* drop clear icon of text box for ie */
::-ms-clear {display: none;}
::-ms-reveal {display: none;}

@media (max-width: 480px) {
    .col-xxs-12 { width: 100%; }
    .col-xxs-11 { width: 91.66666667%; }
    .col-xxs-10 { width: 83.33333333%; }
    .col-xxs-9 { width: 75%; }
    .col-xxs-8 { width: 66.66666667%; }
    .col-xxs-7 { width: 58.33333333%; }
    .col-xxs-6 { width: 50%; }
    .col-xxs-5 { width: 41.66666667%; }
    .col-xxs-4 { width: 33.33333333%; }
    .col-xxs-3 { width: 25%; }
    .col-xxs-2 { width: 16.66666667%; }
    .col-xxs-1 { width: 8.33333333%; }
    .hidden-xxs { display: none; }
}

/* 必須 */
span.required {
    color: #a94442;
}

/* tab */
.nav-tabs li.active {
    border-right: 6px solid #425567;
}

/* ぬるっと表示されるメッセージ */
.popup_alert {
    display: none; /* 初期状態は非表示 */
    /* 画面上部に表示 */
    position: fixed;
    top: 50%;
    left: 50px;
    right: 50px;
    z-index: 1100;
}

/* プログレスバー */
#capa_progress
{
    margin-top: 4px;
}
.progress-wrapper {
    position: relative;
    padding: 0;
}
.progress-meter-marks-wrapper {
    position: absolute;
    top: 4px;
    left: 5px;
    right: 5px;
}
ol.progress-meter-marks {
    padding: 0;
}
.progress-meter-marks li {
    color: #777;
    display: inline-block;
    font-size: 10px;
    padding: 0 0 0 15%;
    position: relative;
    text-align: center;
    width: 0;
}
.progress-meter-marks li strong {
    margin-left: -8px;
}
.progress-meter-marks li:not(:first-of-type) {
    margin-left: -3.8px;
}
.progress-meter-marks li:before {
    content: "";
    width: 0;
    height: 20px;
    border-left: 1px solid rgba(0,0,0,0.2);
    display: block;
    margin: 0 0 3px 0;
}
.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: -4px;
    font-size: 10px;
    color: #3c4e59;
}
.progress-meter-timecard-wrapper {
    position: absolute;
    top: 4px;
    left: 5px;
    right: 5px;
}
.progress-meter-timecard-wrapper i {
    color: #0d1a25;
}
.progress-meter-timecard {
    color: #777;
    position: absolute;
    top: -17px;
    border-left: 0.5px solid #0d1a25;
    height: 37px;
    padding: 0 2px;
    left: 35%;
    font-size: 12px;
    white-space: nowrap;
}
.progress-meter-timecard .lefttext {
    color: #777;
    position: absolute;
    top: 0px;
    right: 6px;   
    white-space: nowrap;
}

/* プロジェクトのステータス */
.status-label {
    white-space: nowrap;
    border-radius: 14px;
    padding: 4px 10px;
    color: #fff;
}
/* 新規 */
.status-ready {
    background-color: #f15b4f;
}
/* 作業中 */
.status-working {
    background-color: #5a738e;
}
/* 作業済み */
.status-already {
    background-color: #279487;
}
/* 終了 */
.status-done {
    background-color: #777777;
}

.status-large {
    padding: 2px;
    border-radius: 14px;
    color: #fff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.status-label.click:hover {
  cursor: pointer;
  opacity: 0.7;
}
.status-label.small {
  font-size: 75%;
}
.status-label.xsmall {
  font-size: 75%;
  padding: 4px 6px;
}

label[class^="btn-status-"].active, label[class^="btn-status-"].active:hover, label[class^="btn-status-"]:hover {
    color: #fff;
}
.btn-status-ready.active.focus, .btn-status-ready.active:focus, .btn-status-ready.active:hover, .btn-status-ready:active.focus, .btn-status-ready:active:focus, .btn-status-ready:active:hover, .btn-status-ready.active, .btn-status-ready:active, .btn-status-ready:hover {
    background-color: #f15b4f;
}
.btn-status-working.active.focus, .btn-status-working.active:focus, .btn-status-working.active:hover, .btn-status-working:active.focus, .btn-status-working:active:focus, .btn-status-working:active:hover, .btn-status-working.active, .btn-status-working:active, .btn-status-working:hover {
    background-color: #5a738e;
}
.btn-status-already.active.focus, .btn-status-already.active:focus, .btn-status-already.active:hover, .btn-status-already:active.focus, .btn-status-already:active:focus, .btn-status-already:active:hover, .btn-status-already.active, .btn-status-already:active, .btn-status-already:hover {
    background-color: #279487;
}
.btn-status-done.active.focus, .btn-status-done.active:focus, .btn-status-done.active:hover, .btn-status-done:active.focus, .btn-status-done:active:focus, .btn-status-done:active:hover, .btn-status-done.active, .btn-status-done:active, .btn-status-done:hover {
    background-color: #777777;
}

.priority-low {
    color: #cdcdcd;
}
.priority-normal {
    color: #cdcdcd;
}
.priority-high {
    color: #fed66e;
}
.priority-icon.click:hover {
  cursor: pointer;
  opacity: 0.7;
}

.text-float-right {
    float: right;
    text-align: right;
}

.nav-sm .menu_section .company {
    display: none;
}
.menu_section .company {
    padding-left: 23px;
    font-size: 12px;
    color: #a6a7aa;
}

#sidebar-menu li.active span.fa-chevron-down {
    transition: all 100ms 0s ease;
    transform:rotate(180deg);
    margin-top: 7px !important;
    margin-right: -5px !important;
}


.list-rect {
    width: 16px;
    height: 16px;
    float: left;
    margin: 0px 6px 0 0;
    border-radius: 20%;
}

.list-point {
    width: 16px;
    height: 16px;
    float: left;
    margin: 0px 6px 0 0;
    border-radius: 50%;
}
.list-point.user-task {
margin: 6px 6px 0 0;
}
h2:has(.list-point),
h2:has(.list-rect) {
    padding-left: 6px;
    padding-right: 30px;
}
h2.project-color.pie {
    margin-left: 10px;
    margin-right: 10px;
}
.list-ratio {
    border-radius: 2px !important;
    border: solid 1px;
}

.img-circle
{
    border-radius: 4%;
    border: 1px solid #e8ebee;
}
.img-circle.profile_img
{
    padding: 0;
}

.prof-wrap {
  position: relative;
}
.prof-tag {
  position: absolute;
  left: -1px;
  top: -5px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
}
.prof-tag.in {
  background-color: #4caf50;
}
.prof-tag.out {
  background-color: #dedede;
}

/* frame */
.search-box {
    position: relative;
    margin: 12px 6px;
}
.search-box .form-control {
    border-right: 0;
    box-shadow: inset 0 1px 0px rgba(0,0,0,0.075);
    border-radius: 25px;
    padding-left: 26px;
    border: 1px solid rgba(221,226,232,0.49);
}
.search-box-icon { 
    left: 10px;
    top: 10px;
    position: absolute;
}

.dropdown-menu .company,
.dropdown-menu .prof {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 4px;
}
.dropdown-menu .my-name {
    margin-left: 4px;
}
.dropdown-menu li a {
    padding: 12px 10px 12px 20px !important;
}

@media (max-width: 768px) {
    .search-popup {
        width: 80%;
    }
    .top_nav .dropdown-menu li a, .time-edit .dropdown-menu li a {
        padding: 18px 20px !important;
    }
    .top_nav .dropdown-menu.msg_list li a {
        padding: 10px 8px !important;
    }
    .navbar-nav .open .dropdown-menu>li>a {
        line-height: 16px !important;
    }
}
@media (min-width: 768px) {
    .search-popup {
        width: 50%;
    }
    .time-edit .dropdown-menu>li>a {
        padding: 12px 20px !important;
    }
}

.navbar-nav .prof-tag {
    left: 12px;
    top: 16px;
}
.dropdown-menu .prof-tag {
    left: 18px;
    top: 34px;
}

.user-profile a img:hover {
    -webkit-filter: brightness(70%);
    filter:brightness(70%);
}
.user-profile a img:active {
    -webkit-filter: brightness(50%);
    filter:brightness(50%);
}
.search-popup {
    display: none;
    background-color: #eee;
    border-style: solid;
    border-color: #DBDBDB;
    border-width: 1px 1px 2px 1px;
    height: fit-content;
    position: absolute;
    right: 10px;
    top: 58px;
    z-index: 9999;
    box-shadow: 1px 1px 10px 2px rgba(4,0,0,.23)
}
.search-popup a:hover,
.search-popup a:focus {
    text-decoration: none;
}
.search-list {
    padding-top: 12px;
    width: 100%;
    border-bottom: 1px solid #DBDBDB;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
}
.search-list:hover {
    background-color: #34485c;
    color: #fff;
}
.search-list.section {
    background-color: #0d1a25;
    padding: 4px 10px;
    color: #bab8b8;
    font-weight: bold;
    margin-top: -1px;
}
.search-list .left {
    width: 10%;
    min-width: 50px;
    float: left;
    text-align: center;
    font-size: 24px;
    margin-top: -10px;
}
.search-list .left .user-profile img {
    margin: 0 0 4px;
}
.search-list .right {
    width: 90%;
    float: left;
}
.search-list h3 {
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 2px 0;
}
.search-list h3 small {
    float: right;
    color: #ADABAB;
    font-size: 11px;
    line-height: 20px;
}

.search-list .hilight {
    color: #fff;
    background-color: #8fb5d6;
}

.search-list .prof-tag {
    left: -1px;
    top: -1px;
}

ul.msg_list li {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #D9DEE4;
    width: 100% !important;
}
.already-read {
    background-color: #fff !important;;
}
.notice-list-wrap {
    margin: 5px;
    height: 46px;
    position: relative;
    display: flex;
    align-items: center;
}
.notice-list {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.notice-list-body {
    font-size: 12px;
    -webkit-box-orient: vertical;
    display: flex;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    max-height: 2.67em;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    line-height: 1.34;
}
.notice-list-body:hover {
    -webkit-line-clamp: initial;
    max-height: initial;
    overflow: initial;
}
.notice-list .time-ago {
    font-size: 10px;
    color: #a2adb9;
}
@media (max-width: 768px) {
    .notice-list-body {
        font-size: 14px;
    }
    .notice-list .time-ago {
        font-size: 12px;
    }
}

.menu-timer-popup {
    display: none;
    background-color: #eee;
    border: 1px solid #000;
    height: fit-content;
    position: absolute;
    left: 150px;
    bottom: 36px;
    z-index: 900;
    width: 400px;
    box-shadow: 1px 1px 10px 2px rgba(4,0,0,.23)
}
.menu-timer-list {
    padding-top: 12px;
    width: 100%;
    border-bottom: 1px solid #DBDBDB;
    margin-bottom: -6px;
    display: inline-block;
}
.menu-timer-list.item:hover {
    background-color: #34485c;
    color: #fff;
    cursor: pointer;
}
.menu-timer-list .left {
    color: #ddd;
}
.menu-timer-list.section {
    background-color: #2a3f54;
    padding: 4px 10px;
    color: #bab8b8;
    font-weight: bold;
}
.menu-timer-list .left {
    width: 10%;
    float: left;
    text-align: center;
    font-size: 24px;
}
.menu-timer-list .right {
    width: 90%;
    float: left;
}
.menu-timer-list h3 {
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 4px 0;
}
.menu-timer-list h3 small {
    float: right;
    color: #ADABAB;
    font-size: 11px;
    line-height: 20px;
}

.tooltip-inner {
    max-width: 100%;
}

.btn-primary {
    background-color: #1a344b;
    border-color: #0d1a25;
}
.btn-primary:hover {
    background-color: #223b51;
}
.btn-primary:focus, .btn-primary:active:hover, .btn-primary:active:focus {
    background-color: #0d1a25;
}

/* エラーのときに揺らす */
.shake {
    -webkit-animation: shake .5s;
    animation: shake .5s;
}

@keyframes shake {
    0%, 100% {
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
    20% {
        -webkit-transform:translate3d(-6px, 0, 0);
        transform:translate3d(-6px, 0, 0)
    }
    40% {
        -webkit-transform:translate3d(6px, 0, 0);
        transform:translate3d(6px, 0, 0)
    }
    60% {
        -webkit-transform:translate3d(-3px, 0, 0);
        transform:translate3d(-3px, 0, 0)
    }
    80% {
        -webkit-transform:translate3d(3px, 0, 0);
        transform:translate3d(3px, 0, 0)
    }
}

.SumoSelect .select-all {
    margin-top: 36px !important;
    height: 36px !important;
    background-color: #f1f1f1 !important;
}
.SumoSelect>.optWrapper>.options {
    top: 0px !important;
}
.SumoSelect .no-match {
    margin-top: 0 !important;
}
.SumoSelect>.optWrapper.multiple.okCancelInMulti>.MultiControls {
    margin-top: 0 !important;
}
.SumoSelect>.optWrapper.multiple.okCancelInMulti>.MultiControls>p.btnOk {
    background-color: #1a344b;
    color: #fff;
}
.SumoSelect>.optWrapper.multiple.okCancelInMulti>.MultiControls>p.btnOk:hover {
    background-color: #0d1a25 !important;
}

.user-list .SumoSelect {
    position: absolute;
    right: 200px;
    width: 230px;
}

.checkbox label, .radio label {
    padding-left: 0;
}

.checkbox label .disabled, .radio label .disabled {
    color: #eee;
}

.timecard-edit-icon {
    cursor: pointer;
    position: absolute;
    display: none;
    z-index: 10;
    font-size: 20px;
}

.clockpicker-am-pm-block .clockpicker-button {
    margin: 10px 1px 0 1px !important;
    width: 50px;
}
.clockpicker-am-pm-block .clockpicker-button.now {
    width: 94px;
}

.clockpicker-span-title {
    cursor: initial !important;
    color:#000;
}
.clockpicker-span-hours:hover, .clockpicker-span-minutes:hover {
    text-decoration: underline;
}

.footer-btn-facebook {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    color: #fff;
    background-color: #3b5998;
    padding-left: 7px;
    padding-top: 2px;
}
.footer-btn-facebook:hover {
    color: #ddd;
}

.btn-chrome {
    visibility: hidden;
}
.btn-chrome img:hover {
    opacity: 0.8;
}

.saturday {
  color: #4858EA !important;
}
.sunday {
  color: #DB1167 !important;
}
.today {
  color: #000 !important;
}

.modal-header {
    padding: 10px 15px;
    color: #fff;
    background-color: #1a344b;
    border-radius: 5px 5px 0 0;
}
.modal-header .close {
    color: #fff;
    opacity: 0.9;
    text-shadow: initial;
    margin: 0px;
    padding: 2px 4px;
}

.modal-header .close:hover {
    color: #d4d4d4;
}

.modal-footer {
    padding: 10px 15px;
}

.project-color {
  border-left: 4px solid #fff;
  padding-left: 4px;
}
p.select2 {
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
p.select2.client .project-color {
    margin-left: 0;
}
p.select2.project .project-color {
    margin-left: 8px;
}
.select2-results p.select2.task {
    height: 20px;
}
.select2-selection__rendered {
    pointer-events: none;
}


/* 折り返さずに省略表示 */
.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}

/* 折り返さずにすべて表示 */
.minimum-width {
    white-space: nowrap;
    width: 1%;
}

.tile_count .tile_stats_count .count .text-half {
    font-size: 60%;
}

.btn-group .btn.active {
    font-weight: bold;
}


.over36-bar {
    background: #cacaca;
}
.over36-low-bar, .over36-low-col {
    background: #ffeaea;
}
.over36-middle-bar, .over36-middle-col {
    background: #ffa0a0;
}
.over36-limit-bar, .over36-limit-col, .over36-limit-col>a  {
    background: #ff0000;
    color: #fff;
}
.over36-high-bar, .over36-high-col, .over36-high-col>a {
    background: #d31414;
    color: #fff;
}

.over36-low-icon {
    color: #ffeaea;
}
.over36-middle-icon {
    color: #ffa0a0;
}
.over36-limit-icon {
    color: #ff0000;
}
.over36-high-icon {
    color: #d31414;
}

.over36-outer {
    display: table;
}
.over36-inner {
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
}

#agree-limit-message {
    position: fixed;
    bottom: 0;
    right: 16px;
    z-index: 999;
}
#agree-limit-message p {
    display: flex;
    align-items: center;
}
#agree-limit-message p i {
    font-size: 50px;
}
#agree-limit-message p span {
    margin-left: 10px;
}
#agree-limit-message p a {
    margin: 12px 0;
}
.p-10 { padding: 10px; }
.pt-8 { padding-top: 8px; }
.mt-4 { margin-top: 4px; }
.minw-100 { min-width: 100px; }
.d-none { display: none; }
.position-relative { position: relative; }


/* 年月の帯 */
.daterangepicker table.table-condensed thead tr:first-child {
	background: #1a344b;
	color: #ECF0F1;
}
.daterangepicker table.table-condensed thead tr th{
	border-radius: 0;
}
.daterangepicker .calendar-table .month {
    font-size: 14px;
}
.daterangepicker .calendar-table .prev {
    border-radius: 5px 0 0 5px;
}
.daterangepicker .calendar-table .next {
    border-radius: 0 5px 5px 0;
}
.daterangepicker .calendar-table .prev span,
.daterangepicker .calendar-table .next span {
	border: solid #fff;
	border-width: 0 2px 2px 0;
}
.daterangepicker .calendar-table th:not(.prev):not(.next) {
    cursor: default;
}

/* 曜日の高さ */
.daterangepicker table.table-condensed thead tr {
	line-height: 24px;
}
/* 曜日の下のボーダー*/
.daterangepicker table.table-condensed thead tr:last-child th {
	border-bottom: 1px solid #e4e4e4;
}
/* range */
.daterangepicker td.in-range,
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
	background: #bedeff !important;
}
.daterangepicker table.table-condensed tbody tr:first-child td {
    padding-top: 5px;
}
.daterangepicker table.table-condensed tbody tr:last-child td {
    padding-bottom: 5px;
}

/* 本日 */
.daterangepicker td.today.active:not(.off) {
	color: #fff !important;
}
.daterangepicker td.today:not(.active) {
	background: #ededed;
	font-weight: bold;
	border-radius: 100%;
	color: #000;
}
.daterangepicker td.today.in-range {
	border-radius: 0;
}

/* 終了日 */
.daterangepicker td.start-date+td.end-date,
.daterangepicker td.in-range+td.end-date {
	background: #536A7F !important;
    border-radius: 0 4px 4px 0;
}
.daterangepicker td.in-range:first-child {
    border-radius: 4px 0 0 4px;
}
.daterangepicker td.in-range:last-child {
    border-radius: 0 4px 4px 0;
}
.daterangepicker td.start-date:last-child,
.daterangepicker td.in-range.end-date:first-child {
	background: #536A7F !important;
    border-radius: 4px !important;
}

/* テキストボックス非表示 */
.daterangepicker_input,
.daterangepicker .ranges li:last-child {
	display: none;
}

/* 今週今月、、、*/
.daterangepicker.show-ranges .ranges {
	margin: 9px;
	float: left;
}
.daterangepicker.show-ranges .ranges ul {
	width: 100%;
}
.daterangepicker.show-ranges .ranges li {
    padding: 10px 12px;
    text-align: center;
}

/* 当月ではない薄い文字*/
.daterangepicker td.off {
    color: #e4e4e4;
}

/* 適用ボタン周り */
.daterangepicker .drp-selected {
    font-size: 14px;    
}
.daterangepicker.show-ranges .drp-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.daterangepicker.show-ranges .drp-buttons button {
    padding: 6px 12px;
    font-weight: normal;
    font-size: 14px;    
}
.daterangepicker.show-ranges .drp-buttons .drp-selected {
    order: 1;
}
.daterangepicker.show-ranges .drp-buttons .applyBtn {
    order: 2;
}
.daterangepicker.show-ranges .drp-buttons .cancelBtn {
    order: 3;
}

/* カレンダー右側余白調整 */
.daterangepicker .drp-calendar {
    max-width: 300px;
}
.daterangepicker .drp-calendar.left {
    padding: 8px;
}
.daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 0;
}

/* 表の１行目固定 */
.table:not(.datatable) {
    border-collapse: separate;
}
.table:not(.datatable) thead>tr>th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: white;
}

/* helper */
.mb-0 { margin-bottom: 0; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.w100 { width: 100%; }

.d-flex { display: flex; }
.align-items-center { align-items: center; }

@media (max-width: 1270px) and (min-width: 192px) {
    /* ページタイトル部分上書き */
    .x_title h2 small {
        display: inline;
        vertical-align: middle;
    }
}