:root {
    --main-color: #3b66bb;
}

.bg-main-color {
    background-color: var(--main-color);
    color: #fff;
}

.content-wrapper {
    padding-bottom: 3vw;
}

/* left nav */

.sidebar .nav-link i{
    min-width: 1.5vw;
}

/* ロゴ */
.brand-link .brand-image {
    margin-left: .5rem;
}


.logo-xl.brand-image-xl, .logo-xs.brand-image-xl {
    left: 15%;
    /* top: 1.5%; */
    width: 65%;
    height: auto;
}

/* プリローダー */
.preloader {
    background-color: var(--main-color);
}

/* サイドバー */
body:not(.layout-fixed) .main-sidebar .sidebar {
    width: 100%;
}

/* 出勤リスト */
.box_attendances_list .box-header {
    height: 3vw;
}

.box_attendances_list .box-header select{
    padding: 0.4vw;
}

/* 出勤詳細 */
.box_attendances_detail .box-header{
    height: 3vw;
}

.box_attendances_detail .box-header select{
    padding: 0.4vw;
}

.attendances-table tbody {
    display: block;
    max-height: 500px;
    overflow-y: auto;
}

.attendances-table th,
.attendances-table td{
    border: none!important;
    font-size: 1vw;
    padding: 0.5vw 0.2vw;
    width: 3vw;
}

.attendances-table th {
    position: sticky;
    top: 0px;
    background-color: #f4f6f9;
}


.attendances-table tr {
    border-top: solid 1px #f4f4f4;
    border-bottom: solid 1px #f4f4f4;
}

.detail-table th.day{
    width: 4%;
}

.detail-table tr td{
    vertical-align: middle!important;
}

@media (max-width: 767px){
    .detail-table th{
        min-width: 9rem;  
    }
}

.attendances-import-box span{
    font-size:1vw;
    border:solid 1px  var(--main-color);
    color: var(--main-color);
}

.attendances-import-box p{
    font-size: 1vw;
}

/* 証憑アップロード */
.new-evidence span {
    font-size:1vw;
    border:solid 1px var(--main-color);
    color: var(--main-color);
}

.new-evidence p {
    font-size:1vw;
}

.box_evidences .box-header select{
    padding: 0.4vw;
}

/* シェアボード */

.panel-heading {
    background-color: var(--main-color)!important;
    border-color: var(--main-color)!important;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff; /* 背景色を設定して下のコンテンツが透けて見えないようにする */
}

.message {
    background-color: var(--main-color);
}

.message .list li {
    font-size: 1vw;
}

.selected-user{
    width: 150px;
    border: solid 1px #333;
    background-color: #fff;
    border-radius: 3px;
    height: 30px;
}

.selected-user i{
    right: 10px;
    top: 8px;
}

.user_list .list {
    list-style: none;
    background-color: #fff;
    width: 250px;
    border: solid 1px var(--main-color);
    max-height: 200px;
    overflow-y: auto;
}

.user_list .list li{
    cursor: pointer;
}

.user_list .list li:hover{
    background-color: #eaf8ff;
}

.user_list .list li .unread{
    padding: 3px 8px;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 12px;
    font-size: 12px;
}

.message_area {
    overflow-y : auto;
    height: 380px;
    border-radius: 5px;
}

.message_info .date p,
.message_info .iconarea,
.message_info .edited {
    font-size: 12px;
}

.nodata {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.iconarea i{
    cursor: pointer;
}

.message {
    background-color: #fff;
}

.message.delete {
    background-color: #ffd2d2!important;
}

.message.update {
    background-color: #ecfbff!important;
}

.message_row:hover {
    background-color: #f9f9f9;
}

@media (min-width: 768px){
    .message_info {
        flex-wrap: wrap;
    }

    .share {
        display: flex;
    }

    .share .message_box {
        border-left: solid 1px #dee2e6!important;
    }

    .user-name {
        font-size: 1vw;
    }
}

@media (max-width: 767px){
    .box-body {
        padding: 0;
    }

    .message_info {
        flex-wrap: wrap;
    }

    .share {
        padding: 0;
    }

    .share .message_view {
        padding: 0 0 0 0;
    }

    .share .message_box {
        padding: 10px 0 0 0;
        border-top: solid 1px #dee2e6!important;
    }

    #submit_btn {
        width: 100%;
    }

    #cancel_btn {
        margin-top: 10px;
        width: 100%;
    }   
}

/* 自社情報 */
@media (min-width: 768px) {
    .box_company .btn-area {
      padding: 0 8px;
      text-align: right;
    }

    .box_company .btn-area button {
      min-width: 100px;
    }

    .box_company th {
        vertical-align: middle;
    }
}

@media (max-width: 767px) {
    .box_company .company table tr {
        display: flex;
        flex-direction: column;
    }

    .box_company .btn-area button {
        min-width: 100px;
    }

    .box_company .btn-area {
        padding: 0 8px;
        text-align: right;
    }

    .box_company th {
        vertical-align: middle;
    }

}

@media (max-width: 576px) {
    .box_company .btn-area {
        padding: 0 8px;
        display: flex;
        justify-content: space-between;
    }

    .box_company .btn-area button{
        width: 40%;
        margin: auto;
        max-width: 230px;
    }

    .box_company th {
        vertical-align: middle;
    }
}