body {
    font-family: "微軟正黑體";
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-btn {
    display: none;
}

.navbar-brand {
    display: block;
}

#navbarSupportedContent {
    width: 70%;
    height: 100%;
    display: inline-block;
    flex-basis: auto;
    flex-grow: 0;
    text-align: center;
    text-align: justify;
    padding: 0 20px;
    margin-left: 100px;
}

    #navbarSupportedContent:after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 1px;
    }

    #navbarSupportedContent .nav-link {
        display: inline-block;
        margin-top: 15px;
        padding-bottom: 20px;
    }

.slllc-nav .btn-member {
    
}

.slllc-logo img {
    height: 40px;
}

.slllc-log-wrapper .modal-header,
.slllc-log-wrapper .modal-footer {
    border: none;
}

.slllc-log-wrapper .modal-body {
    text-align: center;
}

.slllc-nav {
    position: fixed;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    height: 67px;
    z-index: 999;
    padding: 0 25px;
    top: 0;
    flex-wrap: nowrap;
}

a.nav-link,
.navbar-collapse .nav-link,
.sub-menu-wrapper .sub-menu {
    color: #fff;
}

.link-wrapper {
    position: relative;
    cursor: pointer;
}

.sub-menu-wrapper {
    position: absolute;
    width: 140px;
    text-align: center;
    top: 52px;
    left: calc(50% - 70px);
    display: none;
}

.link-wrapper:hover .sub-menu-wrapper {
    display: block;
}

.sub-menu-wrapper .sub-menu {
    display: block;
    padding: 10px 0;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
}

.sub-menu-wrapper .sub-menu:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


a.nav-link.active {
    color: #eb5f6e;
}

.slllc-nav .btn-member {
    background-color: transparent;
    border: solid 1px #fff;
    color: #fff;
}

#navbarSupportedContent .nav-link.btn.language {
    background-color: transparent;
    border: solid 1px #fff;
    color: #fff;
    padding: 6px;
    margin-top: -4px;
}

.language-item {
    border: none;
    background-color: transparent;
    color: #fff;
}

    .language-item option {
        color: #2d2d2d;
    }

.slllc-member-wrapper {
    background-repeat: no-repeat;
    background-position: right;
    background-size: auto 100vh;
    background-image: url(../images/BG_2.png);
    min-height: 80vh;
}

.carousel-item {
    background-color: #bababa;
}

.d-block {
    margin: auto;
}

.member-info {
    margin: 50px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 50px 0;
    background-color: #fff;
}

    .member-info h1,
    .slllc-member-wrapper h1 {
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        color: #785AA5;
    }

.edit-member {
    width: 70%;
    margin: 30px auto;
    font-size: 20px;
}

.info-group {
    border-bottom: solid 1px #e7e7e7;
}

    .info-group p {
        display: inline-block;
        width: 48%;
        margin-top: 1rem;
    }

    .info-group > p:last-child {
        text-align: right;
    }

.btn-wrapper {
    text-align: center;
}

    .btn-wrapper button {
        width: 200px;
    }

.info-group .fa-edit {
    margin-left: 15px;
    color: #bababa;
    cursor: pointer;
}

    .info-group .fa-edit:hover {
        color: #785AA5;
    }

.slllc-member-wrapper {
    margin: 100px auto 100px;
}

.nav-tabs.class-list {
    width: 100%;
    margin: 30px auto;
    border: none;
}

    .nav-tabs.class-list li {
        width: 16.66%;
        text-align: center;
        position: relative;
    }

        .nav-tabs.class-list li:after,
        .nav-tabs.class-list li:first-child:before {
            position: absolute;
            width: 2px;
            height: 20px;
            top: 7px;
            right: 2px;
            content: '';
            display: inline-block;
            background-color: #9b9b9b;
        }

        .nav-tabs.class-list li:first-child:before {
            left: 2px;
        }

.slllc-member-wrapper .nav-tabs.class-list a {
    font-weight: 600;
    color: #9b9b9b;
    font-size: 20px;
}

    .slllc-member-wrapper .nav-tabs.class-list a.active {
        color: #eb5f6e;
    }

.class-list-info {
    width: 80%;
    margin: auto;
    margin-top: 40px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    padding: 30px 40px 30px 65px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
}

    .class-list-info::before {
        content: '';
        display: inline-block;
        left: 0;
        top: 0;
        width: 25px;
        height: 100%;
        z-index: 10;
        position: absolute;
        border-radius: 5px 0 0 5px;
    }

    .class-list-info:hover {
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        transition: ease 0.3s;
    }

    .class-list-info.disable:hover {
        box-shadow: 0 0 0;
    }

    .class-list-info h2,
    .class-list-info p {
        font-weight: 600;
        position: relative;
    }

    .class-list-info span {
        position: absolute;
        right: 0;
        color: #fff;
    }

    .class-list-info h2 span {
        font-size: 18px;
    }

    .class-list-info::before {
        width: 20px;
        content: '';
        display: block;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .class-list-info.disable span {
        color: #7e7979;
    }

    .class-list-info.green {
        background: linear-gradient(to right, #00b9b0 0%, #a4d0ce 100%);
    }

    .class-list-info.lightblue {
        background: linear-gradient(to right, #1eb3dc 0%, #91cbeb 100%);
    }

    .class-list-info.pink {
        background: linear-gradient(to right, #ef818a 0%, #f5b5bb 100%);
    }

    .class-list-info.purple {
        background: linear-gradient(to right, #785aa5 0%, #c3b2dc 100%);
    }

    .class-list-info.pinkpurple {
        background: linear-gradient(to right, #ef818a 0%, #c3b2dc 100%);
    }

    .class-list-info.yellow {
        background: linear-gradient(to right, #f7b064 0%, #fdeaca 100%);
    }

    .class-list-info.lightgreen {
        background: linear-gradient(to right, #00b9b0 0%, #a4d0ce 100%);
    }

    .class-list-info.bluegreen {
        background: linear-gradient(to right, #1eb3dc 0%, #a4d0ce 100%);
    }

    .class-list-info.blueblue {
        background: linear-gradient(to right, #92b8d1 0%, #8fd2ff 100%);
    }

    .class-list-info.disable {
        background: #dedede;
        background: -moz-linear-gradient(left, #dedede 0%, #efefef 100%);
        background: -webkit-linear-gradient(left, #dedede 0%, #efefef 100%);
        background: linear-gradient(to right, #dedede 0%, #efefef 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#efefef', GradientType=1);
    }

a:hover {
    text-decoration: none;
}

.class-list-info p {
    margin-bottom: 0;
}

.slllc-page {
    margin: 50px auto 30px;
}

.page-link {
    color: #2d2d2d;
}

.slllc-member-wrapper .breadcrumb {
    background-color: transparent;
}

.class-info-wrapper {
    margin-top: 40px;
    border-bottom: solid 1px #bababa;
    padding-bottom: 30px;
}

.class-info-detail {
    width: 80%;
    margin: auto;
}

    .class-info-detail p {
        margin-right: 0.5rem;
        display: inline-block;
        /*min-width: 100px;*/
        font-size: 20px;
        vertical-align: top;
    }

        .class-info-detail p.detail {
            max-width: calc(100% - 110px);
        }

    .class-info-detail span.meal-states {
        border: solid 1px #785aa5;
        border-radius: 3px;
        display: inline-block;
        padding: 2px 20px;
        margin: 5px;
        color: #785aa5;
    }

        .class-info-detail span.meal-states.active {
            /*background-color: #9dc4d4;*/
            background-color: #785aa5;
            color: #fff;
        }

    .class-info-detail .pink span.meal-states {
        border: solid 1px #d49d9d;
        color: #d49d9d;
    }

        .class-info-detail .pink span.meal-states.active {
            background-color: #d49d9d;
            color: #fff;
        }

    .class-info-detail .orange span.meal-states {
        border: solid 1px #d4b39d;
        color: #d4b39d;
    }

        .class-info-detail .orange span.meal-states.active {
            background-color: #d4b39d;
            color: #fff;
        }

.bonus-group .class-info-detail {
    margin-top: 50px;
}

    .bonus-group .class-info-detail h2 {
        font-size: 25px;
        font-weight: 600;
        color: #4a4a4a;
    }

.member-info .card {
    border: none;
}

.member-info .accordion > .card .card-header {
    width: 80%;
    margin: auto;
    border-top: none;
    background-color: transparent;
    padding: 10px 0;
}

.member-info .accordion > .card:first-of-type {
    border: none;
}

button.btn.btn-link {
    width: 100%;
    text-align: left;
    font-size: 20px;
    position: relative;
    color: #4a4a4a;
}

    button.btn.btn-link i {
        position: absolute;
        right: 5px;
        top: 15px;
    }

.card-body .class-info-wrapper {
    border-bottom: none;
}

.goto-sign {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    font-size: 20px;
    background-color: #785aa5;
    border-radius: 0 0 15px 15px;
}

    .goto-sign a,
    .goto-sign button {
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
        width: 49%;
        display: inline-block;
    }

.goto-sign-wrapper .modal-content {
    border-radius: 15px;
}

.goto-sign-wrapper .modal-header {
    border-bottom: none;
}

    .goto-sign-wrapper .modal-header h5 {
        margin: 0 auto;
        font-weight: 600;
        color: #785aa5;
        font-size: 22px;
    }

.goto-sign-wrapper .modal-body {
    width: 70%;
    margin: 30px auto;
}

    .goto-sign-wrapper .modal-body label {
        font-weight: 600;
    }

.goto-sign-wrapper .form-control {
    border: none;
    border-bottom: 1px solid #ced4da;
}

.goto-sign-wrapper .modal-body select {
    width: 100%;
    padding: 10px;
}

.goto-sign-wrapper .goto-sign {
    margin-top: 0;
}

.event-group .pagination {
    padding-bottom: 50px;
}

/*pay list*/
.slllc-pay-list .nav-tabs.class-list {
    justify-content: center;
}

/*pay list end*/
/*日曆-我的活動*/
.my-total-class h1 {
    text-align: left;
    width: 80%;
    margin: 30px auto 0;
}

.my-class-detail-wrapper .modal-header h5 {
    font-size: 25px;
}

.my-class-detail-wrapper .modal-body {
    width: 100%;
    margin: 0;
    padding-top: 0;
}

.my-class-detail-wrapper .class-info-detail {
    width: 100%;
    padding: 0 15px;
}

    .my-class-detail-wrapper .class-info-detail p {
        font-size: 16px;
    }

.my-class-detail-wrapper .class-info-wrapper {
    margin-top: 20px;
    border-bottom: none;
    padding-bottom: 0;
}

@media (min-width: 900px) {
    .my-class-detail-wrapper .modal-dialog {
        max-width: 800px;
    }
}

.my-class-detail-wrapper .accordion > .card .card-header {
    border-top: none;
    background-color: transparent;
    padding: 10px 0;
    border-bottom: 1px solid #dadada;
    margin-bottom: 0;
}

.my-class-detail-wrapper button.btn.btn-link i {
    right: 15px;
}

.my-class-detail-wrapper .card {
    border: none;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4);
}

.member-class .class-info-wrapper {
    border-bottom: 0;
}

.member-class .goto-sign {
    margin-top: 0;
}

.top-modal {
    text-align: center;
    ;
}

/*日曆-我的活動 end*/
/*會員資訊編輯*/
.modal-header,
.modal-footer {
    border: none;
}

.edit-form-input input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #bababa;
}

h5.slllc-title-color {
    color: #78aa55;
}

/*會員資訊編輯 end*/
#mobilepayModal .modal-body {
    text-align: center;
}

/*奉獻信息*/
.slllc-message {
    width: 80%;
    margin: 20px auto;
    max-width: 650px;
}

    .slllc-message .form-group label {
        display: inline-block;
        width: 120px;
    }

.radio-block p {
    margin-bottom: 0;
}

.slllc-message .radio-block {
    margin: 20px 0;
}

.slllc-message .form-group .form-control {
    display: inline-block;
    width: calc(100% - 135px);
}

.slllc-message.second {
    margin-top: 50px;
    border-top: solid 1px #bfbfbf;
    padding-top: 30px;
}

.blue-text {
    /*color: #01b0f1;*/
    color: #eb5f6e; 
}

.radio-block .form-check-inline {
    min-width: 110px;
    display: inline-block;
}

.slllc-btn {
    text-align: center;
    margin-top: 50px;
}

    .slllc-btn button {
        width: 200px;
        font-size: 20px;
    }

/*奉獻相關modal css*/
.check,
.deliver,
.failed {
    display: none;
}

    .check .content,
    .deliver .content {
        background-color: #fff;
        text-align: center;
        width: 50%;
        max-width: 400px;
        padding: 30px;
        border-radius: 10px;
        margin: 100px auto 0;
    }

        .check .content p,
        .deliver .content p {
            font-size: 1.2em;
        }

.red-text {
    color: rgb(212, 0, 0);
}

.record {
    padding: 30px;
}

.record-money p {
    display: inline-block;
    min-width: 120px;
}

.record .title {
    font-size: 22px;
    color: #785aa5;
    padding-left: 10px;
}

.record .table {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
}

    .record .table tr:first-child td,
    .record .table tr:first-child th {
        border: none;
    }

    .record .table tr:first-child th {
        width: 130px;
    }

/*牧養管理*/
.shepherd-link {
    position: relative;
    color: #fff;
    cursor: pointer;
}

    .shepherd-link.active {
        color: #eb5f6e;
    }

.shepherd-sub-menu {
    position: absolute;
    width: 150px;
    top: 52px;
    text-align: center;
    left: calc(50% - 75px);
    display: none;
}

.shepherd-link:hover .shepherd-sub-menu {
    display: block;
}

.shepherd-sub-menu a {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    display: block;
}

p.form-control.assign {
    border: none;
    padding: .375rem 0;
    margin-bottom: 0;
}

.shepherd-block .member-info {
    box-shadow: none;
    background-color: transparent;
}

.shepherd-block .radio-block p {
    display: inline-block;
    width: 120px;
}

.slllc-message .result-filter select.form-control {
    width: 80px;
}

.slllc-message .result-filter.form-group label {
    width: fit-content;
}

.second-part {
    margin-top: 50px;
}

.form-group.result-filter {
    width: 100%;
}

.total-wrapper {
    display: inline-block;
    vertical-align: top;
}

    .total-wrapper.right {
        width: calc(100% - 190px);
        text-align: right;
        margin-top: 5px;
    }

        .total-wrapper.right li {
            list-style: none;
            display: inline-block;
            border-right: solid 1px #bfbfbf;
            padding: 0 5px;
        }

            .total-wrapper.right li:last-child {
                border-right: none;
                padding-right: 0;
            }

            .total-wrapper.right li i {
                margin-right: 3px;
                color: #bfbfbf;
            }

    .total-wrapper .num {
        display: inline-block;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        text-align: center;
        margin-left: 5px;
        color: #fff;
        line-height: 26px;
    }

        .total-wrapper .num.blue {
            background-color: rgb(129, 176, 230);
        }

        .total-wrapper .num.orange {
            background-color: rgb(241, 135, 102);
        }

        .total-wrapper .num.green {
            background-color: rgb(108, 214, 98);
        }

.result-card {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
}

    .result-card .total-wrapper.right {
        vertical-align: top;
        width: calc(100% - 210px);
        float: right;
    }

.block-title span {
    margin-left: 5px;
}

.result-table th,
.result-table td {
    text-align: center;
}

    .result-table th:first-child {
        text-align: left;
    }

#dateranepicker_select {
    display: none;
}

.daterangepicker.show-calendar .calendar {
    display: inline-block;
}

.daterangepicker .calendar.left {
    border-right: solid 1px #bfbfbf;
    padding-right: 10px;
}

.ranges {
    text-align: right;
}

.shepherd-btn {
    text-align: center;
    margin-top: 30px;
}

    .shepherd-btn .btn {
        width: 120px;
    }

.person {
    display: none;
}

.person-block .total-wrapper.right {
    font-size: 14px;
}

.person-block .total-wrapper .num {
    margin-right: 5px;
}

.person-block .total-wrapper.right i {
    color: #fff;
    text-align: center;
    margin: auto;
}

.person-block .result-card .total-wrapper .num {
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin: 0 5px 0 0;
    font-size: 12px;
}

.result-table {
    clear: both;
}

.excel-btn {
    margin-bottom: 20px;
    text-align: right;
}

    .excel-btn button {
        background-color: #4bbe4e;
        color: #fff;
        border-radius: 5px;
        border: none;
        padding: 10px;
        margin: 0 0 0 auto;
    }

        .excel-btn button i {
            margin-right: 5px;
        }

.slllc-pagination {
    margin-top: 50px;
}

.edit-wrapper p.edit-title {
    font-weight: 700;
    color: #785aa5;
}

.edit-wrapper .edit-title a {
    font-weight: 700;
    color: #785aa5;
    text-decoration: underline;
}

.edit-wrapper {
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 30px 20px 20px;
    margin: 30px auto;
}

    .edit-wrapper .table {
        text-align: center;
        margin-bottom: 0;
    }

        .edit-wrapper .table th {
            font-weight: 500;
        }

        .edit-wrapper .table i {
            margin-right: 3px;
        }

.distance-title {
    margin: 40px auto;
    text-align: center;
    position: relative;
}

    .distance-title p {
        /*position: relative;*/
        color: #fff;
        width: fit-content;
        background-color: #785aa5;
        padding: 10px;
        border-radius: 10px;
        margin: auto;
        word-break: break-all;
        max-width: 90%;
    }

        .distance-title::before {
            content: '';
            display: block;
            position: absolute;
            z-index: -2;
            width: 100%;
            height: 1px;
            background-color: #785aa5;
            top: 50%;
        }
        /*
        .distance-title p::after {
            content: '';
            display: block;
            position: absolute;
            z-index: -1;
            width: 120px;
            height: 38px;
            background-color: #785aa5;
            top: -6px;
            left: calc(50% - 61px);
            border-radius: 10px;
        }
        */
.list-detail p {
    display: inline-block;
}

    .list-detail p:last-child {
        float: right;
    }

.slllc-message .edit-input-wrapper .form-group .form-control {
    width: calc(100% - 250px);
}

.slllc-message .edit-input-wrapper .form-group button {
    float: right;
    width: 100px;
}

.slllc-message .edit-table .table {
    text-align: center;
}

    .slllc-message .edit-table .table th {
        font-weight: 500;
    }

.slllc-message .edit-table .form-group .form-control {
    width: 80px;
}

.pointer {
    cursor: pointer;
}

.upload-record {
    text-align: center;
}

    .upload-record button,
    .slllc-message .edit-input-wrapper .form-group button {
        background-color: #785AA5;
        color: #fff;
    }

        .upload-record button:hover {
            background-color: #785AA5;
            border-color: #785AA5;
            color: #fff;
        }

.edit-form {
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 30px 20px 20px;
    margin: 30px auto;
}

.edit-table {
    margin: 50px auto 10px;
}

.edit-wrapper td .red-text {
    cursor: pointer;
}

.btn-shekinah-red {
    background-color: #E85F6E;
    color: #fff;
    transition: background-color 0.3s;
}

    .btn-shekinah-red:hover {
        background-color: #E35262;
        color: #fff;
    }

/*牧養管理end*/
@media(max-width:1450px) {
    .slllc-logo img {
        height: 30px;
    }

    #navbarSupportedContent {
        padding: 0 30px;
    }

        #navbarSupportedContent .nav-link {
            padding: 15px 0 15px 0;
            margin-top: 20px;
        }

    .btn-member {
        padding: .3rem .5rem;
    }

    .shepherd-sub-menu {
        top: 45px;
    }
}

@media(max-width:1450px) {
    .navbar-brand {
        margin: auto;
    }

    .slllc-nav .btn-member {
        margin-top: 0;
    }

    .slllc-logo img {
        height: 40px;
    }

    .slllc-nav .nav-btn {
        display: block;
        position: absolute;
        left: 1rem;
        top: 14px;
        border: solid 1px #fff;
    }

    #navbarSupportedContent {
        display: none;
    }

        #navbarSupportedContent.show {
            display: block;
            position: absolute;
            width: 100%;
            left: 0;
            top: 65px;
            padding: 5px 0;
            text-align: center;
            margin-left: 0px;
        }

        #navbarSupportedContent .nav-link {
            display: block;
            width: 100%;
            margin-top: 0;
            background-color: rgba(0, 0, 0, 0.7);
        }

            #navbarSupportedContent .nav-link.btn.language {
                border: none;
                border-radius: 0px;
                background-color: rgba(0, 0, 0, 0.7);
                margin-top: 0px;
                padding: 10px 0px;
            }

        #navbarSupportedContent:after {
            display: none;
        }

    .shepherd-block .slllc-message {
        max-width: 100%;
    }

    .shepherd-sub-menu {
        position: relative;
        text-align: center;
        width: 100%;
        margin-top: 5px;
        top: 0px;
        left: 0px;
    }

        .shepherd-sub-menu a {
            background-color: rgba(255, 255, 255, 0.2);
        }

    .sub-menu-wrapper {
        position: relative;
        margin-top: 5px;
    }

    .sub-menu-wrapper {
        width: 100%;
        text-align: center;
        top: 0;
        left: 0;
    }

        .sub-menu-wrapper .sub-menu,
        .sub-menu-wrapper .sub-menu:hover {
            background-color: rgba(150, 150, 150, 0.7);
        }
}

@media(max-width:991px) {
    .shepherd-block .slllc-message {
        width: 100%;
    }

    .total-wrapper.right {
        width: 100%;
        display: block;
        text-align: left;
    }

        .total-wrapper.right ul {
            padding: 0;
        }
}

@media(max-width:571px) {
    #navbarSupportedContent .nav-link {
        background-color: rgba(0, 0, 0, 0.85);
    }

    .navbar-brand {
        margin: 0;
        margin-left: 65px;
        padding: 0;
    }

    .slllc-logo img {
        height: 30px;
    }

    .navbar-toggler,
    .slllc-nav .btn-member {
        font-size: 0.7rem;
    }

    .slllc-nav {
        background-color: rgba(0, 0, 0, 0.85);
        padding: 0 20px 0 0;
    }

        .slllc-nav .nav-btn {
            top: 22px;
        }

    .slllc-member-wrapper {
        margin: 30px auto 100px;
    }

    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-bottom: .8rem;
    }

    .form-control {
        width: calc(98% - 70px);
        margin-right: 15px;
    }

    .justify-content-end {
        justify-content: initial !important;
    }


    .nav-tabs.class-list li:after {
        display: none;
    }

    .nav-tabs.class-list li {
        padding: 0;
        width: 19%;
        border-bottom: solid 1px #dadada;
    }

        .nav-tabs.class-list li:first-child:before {
            display: none;
        }

    .nav-tabs.class-list a.active:before {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 12px 0 12px;
        border-color: #dadada transparent transparent transparent;
        background-color: transparent;
        top: 100%;
        left: calc(50% - 14px);
        z-index: 1;
    }

    .nav-tabs.class-list a.active:after {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: #ffffff transparent transparent transparent;
        border-color: #ffffff transparent transparent transparent;
        background-color: transparent;
        top: 99%;
        left: calc(50% - 12px);
        z-index: 2;
    }

    .slllc-member-wrapper .nav-tabs.class-list a {
        font-size: 15px;
        font-weight: 500;
    }

    .class-list-info::before {
        width: 12px;
    }

    .class-list-info {
        padding: 10px 10px 10px 25px;
    }

        .class-list-info h2 {
            font-size: 18px;
            font-weight: 500;
            padding-right: 65px;
            width: 100%;
            position: relative;
        }

            .class-list-info h2 span {
                font-size: 14px;
                font-weight: 500;
                top: 0;
            }

        .class-list-info span {
            /*top: 0;*/
            position: inherit;
            display: block;
        }

        .class-list-info p {
            font-size: 14px;
            font-weight: 500;
            padding-right: 65px;
            position: relative;
        }

    .class-list-info {
        margin-top: 20px;
        width: 100%;
    }

    .member-info {
        margin: 0 auto;
        width: 90%;
        padding: 15px 0;
    }

    .class-info-wrapper {
        margin-top: 10px;
    }

    .class-info-detail,
    .member-info .accordion > .card .card-header {
        width: 100%;
    }

        .class-info-detail p,
        .class-info-detail p.detail {
            display: block;
            width: 100%;
            max-width: 100%;
        }

    .card-body {
        padding: 15px;
    }

    .class-info-detail {
        border-bottom: solid 1px #bfbfbf;
        margin-top: 1rem;
    }

        .class-info-detail span.meal-states {
            width: calc(100% - 15px);
        }

    .modal-body .form-control {
        width: 100%;
    }

    .event-info-wrapper .member-info {
        padding: 15px;
    }

    .m-t-adjust,
    .event-info-wrapper {
        margin-top: 90px;
    }

    .my-total-class h1 {
        width: 100%;
    }

    .m-t-adjust .my-class-view {
        padding: 0 15px;
    }

    .edit-member {
        width: 100%;
        margin: 0;
        padding: 15px;
        font-size: 17px;
    }

        .edit-member input {
            width: 100%;
        }

    .m-t-adjust .member-info {
        width: 95%;
        margin-bottom: 20px;
    }

    .slllc-message .form-group label {
        width: 100px;
    }

    .slllc-message .form-group .form-control {
        display: inline-block;
        width: calc(100% - 130px);
    }

    .slllc-message.second {
        padding-top: 20px;
    }

    .radio-block .form-check-inline {
        min-width: 60px;
    }

    .slllc-pay-list.m-t-adjust {
        margin-top: 90px;
    }

    .slllc-pay-list .nav-tabs.class-list li {
        width: 32%;
    }

    .p-d-adjust .event-group .slllc-message {
        width: 100%;
    }

    .record .title,
    .record .table {
        font-size: 18px;
        font-weight: 500;
    }

    .record .table {
        font-size: 16px;
    }

        .record .table tr:first-child th {
            font-weight: 500;
            width: 100px;
        }

    .record-money p {
        text-align: left;
        min-width: 100px;
    }

    .record-money ~ .slllc-message .form-group label {
        width: 120px;
    }

    .goto-sign {
        background-color: transparent;
        padding: 0;
        margin: 0;
        padding-bottom: 30px;
        text-align: center;
    }

        .goto-sign button {
            background-color: #785aa5;
        }

        .goto-sign a {
            background-color: #785aa5;
            border-radius: 5px;
            padding: 10px;
            display: block;
            margin: 10px auto;
        }

    .shepherd-block .slllc-message .form-group label {
        width: 60px;
    }
}

@media(max-width:459px) {
    .total-wrapper.right {
        font-size: 14px;
    }

    .result-card .total-wrapper.right {
        width: 100%;
    }

        .result-card .total-wrapper.right li {
            padding-right: 12px;
        }

    .total-wrapper .num {
        width: 20px;
        height: 20px;
        font-size: 12px;
        line-height: 20px;
    }

    .total-wrapper.left p {
        margin-bottom: 10px;
    }

    .daterangepicker .calendar.left {
        padding-right: 0;
        border-right: none;
    }

    .daterangepicker {
        width: 257px;
    }

    .total-wrapper.left {
        text-align: right;
        width: 100%;
    }

        .total-wrapper.left .form-control {
            margin-right: 0;
        }

    .shepherd-block .slllc-message .result-filter.form-group label {
        width: fit-content;
    }

    .result-card .total-wrapper.left {
        text-align: left;
    }

    .total-wrapper.right li {
        display: block;
        border: none;
        margin-bottom: 5px;
    }

        .total-wrapper.right li i {
            width: 20px;
        }

    .result-card .total-wrapper.right li {
        display: inline-block;
        border-right: 1px solid #bfbfbf;
    }

        .result-card .total-wrapper.right li:last-child {
            border-right: none;
        }

    .list-detail p {
        display: block;
    }

        .list-detail p:last-child {
            float: none;
        }

    .event-group .pagination {
        padding-bottom: 0;
    }

    .page-link {
        padding: 7px;
    }

    .slllc-message .edit-input-wrapper .form-group label,
    .slllc-message .edit-input-wrapper .form-group .form-control,
    .upload-record button,
    .slllc-message .edit-input-wrapper .form-group button {
        width: 100%;
    }

    .slllc-message .edit-input-wrapper .form-group button {
        margin-top: 20px;
    }

    .edit-form .table td {
        display: block;
        border: none;
        text-align: left;
    }

    .edit-table {
        margin: 20px auto 10px;
    }

    .edit-list-group-m {
        border-top: solid 1px #bfbfbf;
    }

    .edit-form .form-group {
        display: inline-block;
    }

    .edit-form .table td:before {
        display: inline-block;
        margin-right: 5px;
        width: 72px;
    }

    td.name:before {
        content: '姓名 :';
    }

    td.team:before {
        content: '小組 :';
    }

    td.adore:before {
        content: '崇拜 :';
    }

    td.day:before {
        content: '靈修天數 :';
    }

    td.active-btn:before {
        content: '執行 :';
    }

    .edit-form thead {
        display: none;
    }
}

@media(max-width:374px) {

    .navbar-toggler {
        padding: .25rem;
    }

    .navbar-brand {
        margin-left: 50px;
    }

    .slllc-logo img {
        height: 20px;
    }

    .slllc-nav .btn-member {
        margin-top: 5px;
    }

    .slllc-member-wrapper .nav-tabs.class-list a {
        font-size: 13px;
    }

    .member-info h1,
    .slllc-member-wrapper h1 {
        font-size: 20px;
    }

    .class-info-detail p {
        font-size: 14px;
    }
}