.btn_text.dropdown-toggle::after {

    display: none;

}



.btn_text {

    padding: 3px 16px;

    border-radius: 2rem;

    font-size: .95rem;

    letter-spacing: .25rem;

    font-weight: 500;

    white-space: nowrap;

}



.btn_text_sm {

    font-size: 0.8rem;

    padding: 6px 20px;

}



.btn_text_lg {

    font-size: 1rem;

    padding: 5px 20px;

}



.btn_text_xl {

    font-size: 1.125rem;

    padding: 6px 32px;

}



@media(min-width: 576px) {

    .btn_text {

        padding: 5px 22px;

        font-size: .95rem;

    }



    .btn_text_sm {

        font-size: 0.8rem;

        padding: 3px 16px;

    }



    .btn_text_lg {

        font-size: 1.05rem;

        padding: 8px 32px;

    }



    .btn_text_xl {

        font-size: 1.25rem;

        padding: 12px 40px;

    }

}



.btn_text:hover {

    transition: .5s;

}



.funcbtn {

    font-size: 1.25rem;

    padding: 3px 16px;

    border: 0px;

}



#btn_history_back {

    background-color: transparent;

    border-radius: 50%;

    width: 2.5rem;

    height: 2.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    color: rgb(0, 0, 0);

    font-size: 1.25rem;

}



#btn_history_back:hover {

    background-color: rgb(255, 255, 255);

}



/**/

.breadcrumb_block {

    display: flex;

    align-items: center;

    padding: .625rem 0px;

}



.breadcrumb_block .breadcrumb {

    margin-bottom: 0px;

}



.breadcrumb_block a {

    color: rgb(78, 78, 78);

    text-decoration: none;

}



.breadcrumb_block .breadcrumb-item+.breadcrumb-item::before {

    float: left;

    padding-right: 0.625rem;

    color: #4e4e4e;

    content: var(--bs-breadcrumb-divider, ">");

}



.breadcrumb_block .breadcrumb-item+.breadcrumb-item {

    padding-left: 0.625rem;

}



.title_block {

    padding-bottom: 1.25rem;

    border-bottom: 1px solid #d3d3d3;

    margin-bottom: 2.5rem;

}



.title_block .main_title {

    font-weight: 500;

    font-size: 1.25rem;

    transform: translateY(3px);

    display: block;

    margin-bottom: 1.25rem;



}



.title_block .sub_title {

    font-weight: 300;

    font-size: 1.5rem;

}

@media(min-width: 576px){

    .title_block .main_title {

        font-size: 1.5rem;

    

    }

}



.heading {

    font-weight: 00;

    font-size: 1.25rem;

}



/*tag*/

.tag_frame {

    white-space: nowrap;

    font-size: .9rem;

    font-weight: 500;

}



.tag_frame::before {

    content: "\A";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #7c7c7c;

    display: inline-block;

    margin: 0 10px;

}



.tag_danger::before {

    background-color: #D76E60;

}



.tag_warn::before {

    background-color: #FFB45C;

}



.tag_primary::before {

    background-color: #487DCE;

}



.tag_secondary::before {

    background-color: #707070;

}



/*inputbox*/

.inputbox {

    border-radius: 30px;

    border: 1px solid rgb(185, 185, 185);

}



.inputbox:focus {

    border: 1px solid rgb(81, 133, 212);

    box-shadow: none;

}



.inputbox_main {

    border-radius: 30px;

    border: 1px solid rgb(0, 0, 0);

}



.inputbox_main:focus {

    border: 1px solid rgb(81, 133, 212);

    box-shadow: none;

}



/*scrollbar*/

.scrollbar_x {

    overflow-x: auto;

    scrollbar-width: thin;

}



.scrollbar_x::-webkit-scrollbar-track {

    border-radius: 10px;

    background-color: transparent;

}



.scrollbar_x::-webkit-scrollbar {

    background-color: transparent;

    height: 8px;

}



.scrollbar_x::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background-color: rgb(190, 190, 190);

}



.scrollbar_y {

    overflow-y: auto;

    scrollbar-width: thin;

}



.scrollbar_y::-webkit-scrollbar-track {

    border-radius: 10px;

    background-color: transparent;

}



.scrollbar_y::-webkit-scrollbar {

    background-color: transparent;

    width: 6px;

}



.scrollbar_y::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background-color: rgb(190, 190, 190);

}



/*message*/

#user_photo {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border: 1px solid rgb(177, 177, 177);

}



#user_photo img {

    border-radius: 50%;

}



#message_textarea {

    max-height: 100px;

    overflow: auto;

}



.textarea {

    display: block;

    width: 100%;

    overflow: hidden;

    resize: vertical;

    min-height: 40px;

    line-height: 20px;

}



.textarea[contenteditable]:empty::before {

    content: "發送訊息";

    color: gray;

}



.time_block {

    color: #6A7074;

}



.content_block .text {

    background-color: #487DCE;

    color: #fff;

    padding: 12px 20px;

    border-radius: 20px;

    word-break: break-all;

}



.content_block .time {

    font-size: .8rem;

}



.content_block .name {

    color: #343E42;

    font-size: .9rem;

}



.content_block .text_block,

.content_block .time,

.content_block .name {

    margin-right: .5rem;

    margin-left: .5rem;

}





/**/

.box_16to9 {

    width: 100%;

    position: relative;

}



.box_16to9:after {

    content: "";

    display: block;

    padding-bottom: calc(100%*9/16);

}



/*progress*/

.progressbox {

    height: 0.5rem;

}



/*doughnut*/

.flex-wrapper {

    display: flex;

    flex-flow: row nowrap;

}



.single-chart {

    width: 100%;

    justify-content: space-around;

}



.circular-chart {

    display: block;

    max-height: 250px;

}



.circle-bg {

    fill: none;

    stroke: #eee;

    stroke-width: 3.8;

}



.circle {

    fill: none;

    stroke-width: 2.8;

    stroke-linecap: round;

    animation: progress 1s ease-out forwards;

}



@keyframes progress {

    0% {

        stroke-dasharray: 0 100;

    }

}



.circular-chart.primary .circle {

    stroke: #3baaa7;

}



.percentage {

    fill: #666;

    font-family: sans-serif;

    font-size: 0.5em;

    text-anchor: middle;

    letter-spacing: normal;

}

/*cardbox*/

.cardbox{

    background-color: #fff;

    border-radius: .25rem;

}

.infobox{

    padding: 1rem 1.25rem;

    background-color: rgb(255,255,255);

    border-radius: .5rem;

    border: 1px solid rgb(200,200,200);

}

@media(min-width: 576px){

    .infobox{

        text-align: center;

    }

}



.infobox_title{

    font-weight: 500;

}