/* .bg-black{
    background: #333;
}

.bg-black li.nav-item a, .bg-black li.nav-item a i{
   
    -webkit-transition: all 0.5s; 
    transition: all 0.5s;
}

.bg-black li.nav-item:hover{
    background:  #1b75bb !important;
    -webkit-transition: all 0.5s; 
    transition: all 0.5s;
    color: white !important;
} */

img.loading-act{
    width: 32px;
    height: 32px;
}
div.page-selection ul.bootpag {
    float: right;
}

div.page-selection ul.bootpag li{
    text-align: center;
    margin-left: 5px;
}
div.page-selection ul.bootpag li a{
    width: 30px;
    height: 30px;
    line-height: 27px;
    text-decoration: none;
    display: block;
    border : 1px solid #dadada !important;
    color: #525f7f;
    

}

div.page-selection ul.bootpag li.active a{
    color: white !important;
    background: #1b75bb !important;
}

span.text-expired{
    background: #f5365c !important;
    color: white;
    padding: 1px 5px;
    border-radius: 10px;
}

span.text-soon{
    background: #fae102 !important;
    color: white;
    padding: 1px 5px;
    border-radius: 10px;
}

span.text-remain{
    background:#2dce89 !important;
    color: white;
    padding: 1px 5px;
    border-radius: 10px;
}

p.code{
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px;
}

span.dot{
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

span.s_num{
    font-weight: 600;
}

span.text-style{
    font-weight: 600;
}

.text-normal{
    font-weight: 600;
    margin-bottom: 0;
    font-size: 14px;
}

.invalid-data{
    border : 1px solid #f5365c !important;
    background: url(https://cdn0.iconfinder.com/data/icons/shift-free/32/Error-512.png) no-repeat scroll   !important;
    background-position: right 5px center  !important;
    padding-right: 25px; 
    background-size: 20px 20px !important;

}

.select2-wrapper .invalid-data{
    border : 1px solid #f5365c !important;
    background: url(https://cdn0.iconfinder.com/data/icons/shift-free/32/Error-512.png) no-repeat scroll   !important;
    background-position: right 5px center  !important;
    padding-right: 25px; 
    background-size: 20px 20px !important;
}


.store-option .select2-selection{
    min-height: 45px !important; 
    border: 0;
    border-radius: 5px !important; 
    transition: box-shadow .15s ease;
    box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);
}
.categories-select .select2-selection{
    min-height: 45px !important; 
    border: 0;
    border-radius: 5px !important; 
    transition: box-shadow .15s ease;
    box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);
}

.select2-results__option{
    font-size: 14px;
}

.select2-selection:focus{
    outline: none;
}

.select2-search__field:focus{

    transition: box-shadow .15s ease;
    box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02) !important;
    outline: none;
}

.store-option .select2-selection__rendered, .select2-selection__arrow{
    min-height: 45px !important;
    line-height: 45px !important; 
}


table.data-table-save tbody tr td{
    padding-left: 5px !important;
    padding-right: 5px !important;
}

label {
cursor: pointer;
/* Style as you please, it will become the visible UI component. */
}

.upload-photo {
opacity: 0;
position: absolute;
z-index: -1;
}

.box-image{
width: 70px; 
height: 70px;
border: 1px dashed #aaa;
padding: 2px;
}

.box-image img{
width: 100%;
object-fit: cover;
height: 100%;

}

div.image-wrapper{
    border: 2px solid #e0e0e0;
    width:380px;
    height:380px;
    position:relative
}

img.item-image{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    object-fit: cover;
}

/* map */

#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 400px;
   
}

#pac-input:focus {
border-color: #4d90fe;
}

.top-space{
top: 6px !important;
}

.top-space-advance{
top: 60px !important;
left: 0 !important;
}
/* end map */


span.text-active{
    color: white;
    padding: 2px 10px;
    background: #1b75bb;
    border-radius: 5px;
}

span.text-inactive{
    color: white;
    padding: 2px 10px;
    background: #cad1d7;
    border-radius: 5px;
}

.left-sidebar li.nav-item a.active{
    background: #f6f9fc !important;
}


/* box big and small image */
div.small-image-wrapper {
    max-width: 380px;
}

div.box-small {
    text-align: center;
    margin-top: 10px;
    width: 76px;
    height: 76px;
    float: left;
    padding: 3px;
    cursor: pointer;
}

div.box-small div.small-image-thumbnail {
    border: 2px solid #dedede;
    width: 100%;
    height: 100%;
    position: relative;
    background: white;
}

img.small-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 2px;
    border: 3px solid white;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

div.active-box-small div.small-image-thumbnail{
    border: 2px solid #ff7829;
    position: relative;
    text-align:center;
    background: white;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    
}

div.active-box-small div.small-image-thumbnail:before{
    top: -6px;
    border: solid transparent;
    content: " ";
    height: 10px;
    width: 10px;
    position: absolute;
    background: #ff7829;
    text-align:center;
    left:30px;
    z-index:0;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari 3-8 */
    transform: rotate(45deg);

}

div.active-box-small-color div.box-small-color-thumbnail{
    border: 2px solid #ff7829;
    position: relative;
    text-align:center;
    background: white;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    
}

/* end box big and small image */


.table .thead-light th {
    color: #555758 !important;
    background: transparent !important;
    font-weight: bold;
}

.table  tr:nth-child(even){background-color: #f0f8fb;}

.page-head-title{
    font-size:20px;
}

.cnt_title{
    font-size: 14px;
    font-weight:400;
    margin-bottom:0;
}

.cnt_data{
    font-weight:600;
    font-size:24px;
    margin-bottom:0;
}

.cnt_green{
    color:#2dce89;
}

.cnt_gray{
    color:#aba9a9;
}

.cnt_a{
    text-decoration: none;
    color: #525f7f !important;
}

.cnt_a:hover{
    opacity: 0.8 !important;
}

.searchresult{
    color: #a0a0a0;
    font-size: 14px;
}

.icon-b-text{
    margin-right: 5px;
    color: #989898;
}

th i{
    margin-left: 5px;
    font-size: 12px;
    color: gray;
    cursor: pointer;
}

p.cnt_title.selected{
    color: #1b75bb;
    font-weight: bold;
}

.table tr th.sortable{
    cursor: pointer;
}

.table tr th.selected,.table tr th.selected i{
    color: #1b75bb !important;
}

.important-data-color{
    color: #2ece89;
    font-weight: 600 !important;
}

.detail-header-title{
    color: #a9a9a9;
    font-weight: 600;
}

.detail-header-spliter{
    border-bottom: 1px solid #e6e6e6;
    margin-top:5px;
}

.item-history-detail{
    color: #525f7f;
    font-size: 15px;
}

.categories-select input.select2-search__field{
    margin-top:8px !important;
}

button.btn-search{
    height: fit-content;
}

.cut-text{
    text-overflow: ellipsis;
    overflow: hidden; 
    width: 200px; 
    white-space: nowrap;
}

.cut-text-width{
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
}

.status-icon i{
    margin-right: 5px;
    font-size: 18px;
}

.status-icon span{
    font-size: 15px;
}

.status-inactive{
    color: #d0cbcb;
}

.text-blue-board{
    color: #428bca;
}

.action-spliter{
    border-right:2px solid #d6d6d6;
    height: 10px;
    margin-left: 7px;
    margin-right:10px;
}

.bg-gradient-primary-evercash{
    background : linear-gradient(87deg, #1b75bb, #1b75bb 100%) !important;
}

.status-data{
    font-size: 20px;
    margin-right: 8px;
}