body {
    background: #f2f2f2;
    color: #454545;
    font-family: "NotoSansCJKjp","メイリオ",Meiryo,"ヒラギノ角ゴ ProN","Hiragino Sans","sans-serif";
    font-size: 1.1vw;
}

/* サイドバー開閉処理後、JSでvisibility-hiddenを取り除いて画面を表示するようにする */
.visibility-hidden{
    visibility: hidden;
}

form input[type=text], form input[type=password], form textarea {
    border-radius: 5px;
}

/* ----------------------------------
    BUTTON
---------------------------------- */
button:focus {
    outline: none !important;
    box-shadow: none !important;
}
button.normal {
    color: #ffffff;
    background-color: #4f81c7;
    border-color: #4f81c7;
    border-radius: 5px;
}

button.normal:hover,
button.normal:disabled,
button.normal:disabled:hover {
    color: #ffffff;
    background-color: #4f81c7;
    border-color: #4f81c7;
    opacity: 0.8;
}

button.monotone1 {
    color: #454545;
    background-color: #c9c9c9;
    border-color: #c9c9c9;
    border-radius: 5px;
}

button.monotone1:hover,
button.monotone1:disabled,
button.monotone1:disabled:hover {
    color: #ffffff;
    background-color: #4F81C7;
    border-color: #4F81C7;
    opacity: 0.8;
}

button.monotone2 {
    color: #ffffff;
    background-color: #838383;
    border-color: #838383;
    border-radius: 5px;
}

button.monotone2:hover,
button.monotone2:disabled,
button.monotone2:disabled:hover {
    color: #ffffff;
    background-color: #838383;
    border-color: #838383;
    opacity: 0.8;
}

button.size-normal {
    width: auto;
    min-width: 240px;
    height: 50px;
    font-size: 20px;
    padding: 0 20px;
}

button.size-normal .plus-mark {
    margin-right: 3px;
    font-size: 25px;
    line-height: 1;
}

button.size-small {
    width: auto;
    min-width: 120px;
    height: 36px;
    font-size: 15px;
    padding: 0 10px;
}

/* ----------------------------------
    TOGGLE BUTTON
---------------------------------- */
.btn-group .btn {
    cursor: pointer;
    color: #454545;
    background-color: unset;
    border-color: #707070;
}
.btn-group .btn.active {
    color: #ffffff;
    background-color: #4f81c7;
    border-color: #4f81c7;
}

/* ----------------------------------
    COMMON ITEM
---------------------------------- */
.info-message {
    margin: 2vw auto;
    text-align: center;
}

.error-message {
    margin: 2vw auto;
    text-align: center;
    color: #e00;
}

.error-message .error-icon {
    width: 1.1vw;
    height: 1.1vw;
    vertical-align: text-top;
}

.contents .main {
    padding-left: 270px;
    padding-right: 20px;
    padding-bottom: 10px;
}

.contents .main.transition{
    transition: all 150ms 0s ease;
}

 /* サイドバーの縮小表示時、mainを横幅いっぱいまで広げる */
.contents .main.wide-display {
    padding-left: 60px;
}

.bc {
    padding-top: 50px;
    font-size: 14px;
}

.bc a {
    color: #555555;
}

.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.thumbnail_employee_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: unset !important;
}

/* ----------------------------------
    BREADCRUMBS
---------------------------------- */
.bread-area {
    font-size: 12px;
    background-color:#f2f2f2;
    margin-top: .5rem;
    margin-bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 1rem 0;
    list-style: none;
    border-radius: 0.25rem;
}

.bread-area-item+.bread-area-item {
    padding-left: .5rem;
}

.bread-area-item+.bread-area-item::before {
    display: inline-block;
    padding-right: .5rem;
    content: ">";
}

.bread-area a {
    color: #454545;
}

/* ----------------------------------
    CONTENTSHEADER
---------------------------------- */
.contents-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
*:not(.bread-area) + .contents-header {
    margin-top: 100px;
}

.title { /* TODO: 削除 (お知らせ修正後) */
    padding-top: 16px;
    font-size: 18px;
}
.main-title {
    font-size: 20px;
}

/* ----------------------------------
    SEARCH BOX
---------------------------------- */
.search-box-wrapper {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}
.search-box {
    position: relative;
}
.search-box .fas {
    position: absolute;
    top: 12px;
    margin-left: 12px;
    font-size: 18px;
}
.search-box__text {
    border: none;
    font-size: 20px;
    width: 300px;
    height: 40px;
    padding: 4px 10px 4px 40px;
}

.filter_container_item {
    margin-left: 20px;
}

.search-type {
    margin-right: 10px;
}

.search-type_toggle {
    min-width: 8rem;
    height: 40px;
    background: #ffffff;
    border: solid 1px #c9c9c9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.filter_toggle {
    padding: 0;
    font-size: 0.9rem;
    cursor: pointer;
}

.search-filter_selected, .search-type_selected {
    display: none;
}

/* ----------------------------------
    LIST / TODO: 削除 (申請待ちリスト, お知らせ修正後)
---------------------------------- */
.list-title {
    font-size: 18px;
    float: left;
}

.list {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
}

.list thead tr {
    height: 60px;
    border: 0.5px #707070 solid;
    background: #ffffff;
}

.list tr.spacer {
    background: none;
    height: 4px;
    border: 0px #707070 solid;
}

.list th {
    font-size: 16px;
    text-align: center;
    color: #4F81C7;
}

.list th.invalid,
.list td.invalid {
    width: 20px;
}

.list tbody tr {
    height: 60px;
    border: 0.5px #707070 solid;
    background: #ffffff;
}

.list tr.invalid-item td {
    opacity: 0.6;
}

.list td {
    color: #838383;
    font-size: 16px;
}

.list tbody tr:hover {
    background: #E7F5FA;
}

.list td {
    position: relative;
    background-clip: padding-box;
}

.list th.icon,
.list td.icon {
    width: 60px;
    text-align: center;
}

.list td.icon img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.list td.name .user-name {
    color: #3c3c3c;
    font-weight: 500;
    font-size: 18px;
}

.list td.name .display-name {
    font-size: 14px;
}

.list td.button {
    text-align: right;
}

.list .ellipsis {
    height: 12px;
    width: 12px;
    margin-left: 3px;
    display: inline-block;
    font-size: 8px;
    background: #e5e5e5;
    border-radius: 50%;
    text-align: center;
}

/* ----------------------------------
    DETAIL TABLE / TODO: 削除 (お知らせ修正後)
---------------------------------- */
.detail-info {
    width: 100%;
    margin-top: 20px;
}

.detail-info tr {
    height: 60px;
    background: #ffffff;
    border: 0.5px #707070 solid;
}

.detail-info tr.head {
    height: 80px;
}

.detail-info tr.head td {
    line-height: 80px;
    padding-left: 70px;
}

.detail-info tr.head td img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.detail-info tr.head td .name-wrapper {
    display: inline-block;
    line-height: 1.2;
    margin-left: 20px;
    vertical-align: middle;
}

.detail-info tr.head td .name {
    color: #3c3c3c;
    font-weight: 500;
    font-size: 18px;
}

.detail-info tr.head td .display-name {
    font-size: 16px;
    color: #838383;
}

.detail-info td {
    line-height: 60px;
    vertical-align: middle;
}

.detail-info td.title {
    width: 40%;
    padding: 0;
    padding-left: 80px;
    font-size: 16px;
    color: #4F81C7;
}

.detail-info td.contents {
    font-size: 16px;
    color: #838383;
    word-break: break-all;
}

/* ----------------------------------
    MODAL / TODO: 削除 (申請待ちリスト, お知らせ修正後)
---------------------------------- */

.modal .modal-dialog {
    width: 60%;
    max-width: 60%;
}

.modal input {
    line-height: 2;
    border-style: solid;
}

.modal .modal-content {
    background: #f2f2f2;
    border-radius: 0;
}

.modal .modal-body {
    padding: 0;
    padding-bottom: 50px;
}

.modal .close {
    margin-right: 10px;
    height: 40px;

    color: #555555;
    font-size: 40px;
    font-weight: normal;
    line-height: 0.5;
    opacity: 1;
}

.modal .modal-title {
    margin-top: 20px;
    margin-left: 20px;

    color: #555555;
    font-size: 18px;
    font-weight: bold;
}

.modal .modal-info {
    width: 60%;
    margin: 0 auto;
    margin-top: 40px;
}

.modal .modal-info tr {
    height: 60px;
    background: #ffffff;
    border: 1px #c9c9c9 solid;
}

.modal .modal-info td {
    font-size: 16px;
    font-weight: 500;
    color: #3c3c3c;
    padding: 0;
    vertical-align: middle;
}

.modal .modal-info tr.head {
    height: 100px;
}

.modal .modal-info td.info {
    width: 60px;
    text-align: right;
    padding-right: 5px;
}

.modal .modal-info tr.head td.icon {
    width: 25%;
    padding-right: 20px;
    text-align: right;
    position: relative;
}

.modal .modal-info tr.head input.icon-file {
    display: none;
}

.modal .modal-info tr.head td.icon div.mask {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #000000;
    opacity: 0.4;

    color: #ffffff;
    font-size: 10px;
    text-align: center;
    padding-top: 40px;
}

.modal .modal-info tr.head td.icon div.mask:hover {
    cursor: pointer;
}

.modal .modal-info tr.head img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.modal .modal-info tr.head td.name .name {
    color: #3c3c3c;
    font-weight: bold;
    font-size: 16px;
}

.modal .modal-info tr.head td.name .display-name {
    font-size: 14px;
}

.modal .modal-info td.info .badge {
    padding-top: .5em;
    vertical-align: middle;
}

.modal .modal-info td.title {
    text-align: left;
}

.modal .modal-info td.contents {
    text-align: left;
    padding-left: 20px;
    font-size: 16px;
}

.modal .modal-info td.contents input,
.modal .modal-info td.contents select {
    margin: 5px 0;
}

.modal .modal-info td.contents select {
    width: 50%;
}

.modal .modal-info td.contents input[type="radio"] {
    display: inline-block;
    width: 20px;
    margin-left: 10px;
    margin-right: 3px;
    line-height: 60px;
    vertical-align: middle;
}

.modal .modal-info td.contents label {
    display: inline-block;
    line-height: 60px;
    vertical-align: middle;
    margin: 0;
}

/* ----------------------------------
    NOTICE ITEM
---------------------------------- */
body .tooltip.show {
    opacity: 1;
}

.tooltip .arrow {
    display: none;
}

.tooltip .tooltip-inner {
    background: #ffffff;
    color: #3c3c3c;
    max-width: 100%;
    font-weight: bold;
    border: 1px solid #c9c9c9;
}

div.toast {
    background: #ffffff;
    min-width: 300px;
    max-width: 100%;
    border: 1px solid #c9c9c9;
    text-align: center;
    font-size: 1.5rem;
    padding: 15px 0;

    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
}

div.toast.info-toast {
    font-weight: bold;
    color: #3c3c3c;
}

div.toast.error-toast {
    color: #f54b4b;
}

div.center-toast {
    display: none;
    font-size: 1.5rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 200;
    width: 100%;
    padding: 12px 0;
}

div.center-toast.center-toast-success {
    color: #3c3c3c;
    background: #ebfad6;
}

div.center-toast.center-toast-info {
    color: #3c3c3c;
    background: #eeeeee;
}

i.fas.fa-check-circle {
  color: #55c74f;
  font-size: 2rem;
  margin-right: 5px;
}

.error-messages {
    display: none;
    margin-bottom: 10px;
    color: #f54b4b;
}

.badge {
    background: #44b2da;
    color: #ffffff;
    font-size: 12px;
}

/* ----------------------------------
    SIDEBAR
---------------------------------- */
#sidebar .list-group .collapse .list-group-item  {
    padding-left: 20px;
}

/* level 2*/
#sidebar .list-group .collapse > .collapse .list-group-item {
    padding-left: 30px;
}

/* level 3*/
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item {
    padding-left: 40px;
}