.avatar{
    float: left;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -2px;
}

.breadcrumb-head{
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ddd;
    position: unset;
}

.box-search-table {
    background: #ebeae8 none repeat scroll 0 0;
    padding: 5px;
    text-align: right;
    width: 100%;
}

.pull-right {
    float: right !important
}

.pull-left {
    float: left !important
}

.box-search-table button {
    border-radius: 0 !important;
    float: right;
    padding: 6px;
}
.box-search-table .form-control.form-inline {
    width: auto;
    float: right;
}
.table thead {
    background-color: #518ca3;
}
.table th, .table th a {
    color: #ffffff;
}
.header-action li {
    float: left;
    list-style: none;
}
.header-action a {
    margin-left: 5px;
}
.fa-sort-amount-asc:before {
    content: "\f160";
}
.fa-sort-amount-desc:before {
    content: "\f161";
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 5px;
    border: 1px solid #f4f4f4;
    font-weight: 400;
}
.card-title {
    padding: 0.5rem 0 !important;
}

/* width */
.w_20{
    width: 20px;
}
.w_30{
    width: 30px;
}
.w_50{
    width: 50px;
}
.w_60{
    width: 60px;
}
.w_70{
    width: 70px;
}
.w_80{
    width: 80px;
}
.w_90{
    width: 90px;
}
.w_100{
    width: 100px;
}
.w_120{
    width: 120px;
}
.w_130{
    width: 130px !important;
}
.w_140{
    width: 140px;
}
.w_150{
    width: 150px;
}
.w_160{
    width: 160px;
}
.w_170{
    width: 170px;
}
.w_180{
    width: 180px;
}
.w_200{
    width: 200px;
}
.w_220{
    width: 220px;
}
.w_250{
    width: 250px;
}
.w_270{
    width: 270px;
}
.w_280{
    width: 280px;
}
.w_290{
    width: 290px;
}
.w_300{
    width: 300px !important;
}
.w_320{
    width: 320px !important;
}

.w_350{
    width: 350px !important;
}
.w_400{
    width: 400px !important;
}
.total-record {
    padding: .4rem;
}
.dropdown-menu-lg{
    min-width: 200px;
}
.action a {
    border: medium none;
    height: auto;
    padding: 1px 6px;
}
.fa-refresh:before {
    content: "\f021";
}

@media (min-width: 768px) {
    .table-responsive{
        display: inline-table;
    }
}

.form-search button:first-child{
    border-radius: 0 5px 5px 0 !important;
}

.form-search .text-search{
    border-radius: 5px 0 0 5px !important;
}
.error, .red{
    color: red;
    font-size: 12px;
}
.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef !important;
    opacity: 1;
    cursor: no-drop;
}
.custom-control-input:disabled~.custom-control-label, .custom-control-input[disabled]~.custom-control-label {
    opacity: .5;
}
.text-danger{
    font-size: 15px;
}
.show-errors{
    background: floralwhite;
    padding: 5px;
}

.color_GET{
    background: #61affe;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 500;
    color: #ffffff;
}


.color_POST{
    background: #49cc90;
    padding: 5px 10px;
    border-radius: 5px;
    color: #ffffff;
    font-weight: 500;
}

#view_diaries tr td{
    border: 0 !important;
    width: 130px;
}
/* notification */
.mod-notify-icon {
    background: #16a05d;
    border-radius: 20em;
    height: 45px;
    left: 20px;
    top: 20px;
    position: absolute;
    width: 45px;
}
.mod-notify-container {
    padding-left: 35px;
}
.mod-notify-icon i {
    color: #fff;
    position: relative;
    left: 8px;
    top: 8px;
    font-size: 30px;
}
.mod-notify-title {
    color: #16a05d;
    display: block;
    font-size: 18px;
}
.mod-close-notice {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 16px;
    right: 8px;
}

.image-box{
    display: block;
    position: relative;
    width: 200px;
}

.image-box img{
    display: block;
    /*padding: 4px;*/
    background-color: #fff;
    /*border: 1px solid #ddd;*/
    border-radius: 4px;
    transition: border .2s ease-in-out;
}

.image-box a{
    position: absolute;
    top: 5px;
    right: 5px;
}

.notify{
    margin-top: 50px;
    z-index: 1;
}

.custom-img{
    width: 100%;
    height: 50px;
    object-fit: contain;
    text-align: center;
}

.image-box img{
    object-fit: cover;
    width: 200px;
    height: 200px;
}

.model-viewer{
    width: 100%;
    height: 300px;
    background-color: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 4px;
}

#hexcolor{
    width: 100px;
    border: 0;
    border-right: 1px solid;
    border-radius: 0;
    border-color: #ced4da;
    background: transparent;
}

#background_color{
    border: 0;
}

.group_color{
    display: flex;
    border: 1px solid #ced4da;
    border-radius: 5px;
}


.label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}

.label-success {
    background-color: #5cb85c;
}

.label-danger {
    background-color: #d9534f;
}
.mr15px{
    margin-right: 15px !important;
}

.help-block {
    margin-bottom: 0;
    color: red;
    font-style: italic;
}


#product_image_box img.thumbnail {
    height: 200px;
    object-fit: cover;
    object-position: center;
    margin-bottom: 5px;
}

#product_image_box .image-box {
    display: block;
    margin-bottom: 5px;
    position: relative;
}

#product_image_box .image-box a {
    position: absolute;
    top: 10px;
    right: 10px;
}