.page-panel-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
                .page-panel-head .btn {
                    font-size: 0.8rem;
                }
.page-panel-head h1{font-size: 24px; font-weight: 500; margin-bottom: 0;}
.page-panel{margin: 2rem 0;}

.table-styled {font-size: 13px;border-collapse: collapse; width: 100%;}
.table-styled th{background-color: #eee;padding: 10px;}
.table-styled td{vertical-align: center; padding: 10px; border-bottom: 1px solid #ddd; }

.btn-action{width:36px; height: 36px; display: flex; align-items: center; justify-content: center;border-radius: 6px; transition: all 0.4s; border-radius: 60px;}
.btn-action svg{fill: #666;width:18px; height:18px;}
.btn-action:hover{background-color: #eee;}
.btn-action:hover svg{fill: #333;}

.table-container{overflow: auto;width: 100%;border: 1px solid #ddd; }

.small-field{max-width: 60px; min-width: 60px;}
.small-field input{width: 100%; border-radius: 4px; border: 1px solid #999;padding: 0 10px; height: 32px; text-align: center;}

@media(min-width:576px){
    .page-search{display: flex; flex-wrap: wrap;margin: 0 -10px; }
    .page-search-cell{flex: 1; padding:0 10px;}
    .page-search-cell-first,.page-search-cell-last{flex:0 0 200px; max-width: 200px;}
}
@media(max-width:576px){
    .page-search-cell{padding: 10px 0;}
}

.page-search-cell input,.page-search-cell select{width: 100%;}
.page-search-panel{border: 1px solid #ddd; padding: 1rem; margin-bottom: 1rem;}
.white-space{white-space: nowrap;}



.btn-with-icon{display: flex; position: relative; padding:5px 10px; border-radius: 60px; overflow: hidden; align-items: center;font-weight: 600;font-size: .8rem;color: var(--brand-color)!important;}
.btn-with-icon:before{position: absolute; left: 0;right: 0;top: 0; bottom: 0;content: ""; background-color:var(--brand-color); pointer-events: none;opacity: 0.07;}
.btn-with-icon .icn{width: 20px;height: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-right:5px; border-radius: 0;}
.btn-with-icon .icn-txt{font-weight: 500;}


@media(min-width:1199px){
    .btn-with-icon:hover{background-color: var(--brand-color); color: var(--brand-color-inverse)!important;}
    .btn-with-icon:hover:before{display: none;}
}
@media(max-width:576px){
    .btn-with-icon .icn{margin: 0;}
    .btn-with-icon{padding: 5px;}
}

.note{
    color: #726868;
    font-size: 0.65rem;
}

.error{
    color: var(--brand-color);
}

.small-field input.error{
    border: 1px solid var(--brand-color);
}