:root {
    --bodyColor: rgb(0, 188, 212);
    --drop: rgba(125, 125, 125, 0.7);
    --update: rgba(0, 150, 136,0.7);
    --delete: rgba(255, 65, 54, 0.7);
    --view: rgba(3, 169, 244, 0.7);
    --print: rgba(255, 133, 24, 0.7);
    --release: rgba(243, 210, 6, 0.7);
    --member: rgba(3, 169, 244, 0.7);
    --book: rgba(3, 169, 244, 0.7);
    --pencil: rgba(0, 150, 136,0.7);
    --key: rgba(251, 192, 45, 0.7);
    --dolar: rgba(3, 169, 244, 0.7);
    --plus: rgba(71, 164, 71, 0.7);
    --table: rgba(255, 152, 0, 0.7);
    --change: rgba(3, 169, 244, 0.7);
    --comment: rgba(255, 133, 24, 0.7);
    --active: rgb(0, 128, 0, 0.7);
    --graduated: rgb(255, 165, 0, 0.7); 
    --stop: rgba(255, 65, 54, 0.7);
    --print-certificate: rgba(179, 125, 0, 0.7);
    --simple-plus: rgba(71, 164, 71, 0.7);
    --th-list: rgba(3, 169, 244, 0.7);
    --bars: rgba(3, 169, 244, 0.7);
    --view-table: rgba(3, 169, 244, 0.7);
    --chevron-up: rgba(66, 139, 202, 0.7);
    --arrow-left: rgb(250, 188, 61, 0.7);
    --group: rgba(3, 169, 244, 0.7);
    --refresh: rgba(3, 169, 244, 0.7);
    --close: rgba(153, 153, 153, 0.7);
    --circle: var(--bodyColor);
    --complete: rgba(0, 150, 136,0.7);
    --check: rgba(0, 150, 136, 0.7);
    --cancel: rgba(255, 65, 54, 0.7);

    --drop-hover: rgba(125, 125, 125, 1);
    --update-hover: rgba(0, 150, 136, 1);
    --delete-hover: rgba(255, 65, 54, 1);
    --view-hover: rgba(3, 169, 244, 1);
    --print-hover: rgba(255, 133, 24, 1);
    --release-hover: rgba(243, 210, 6, 1);
    --member-hover: rgba(3, 169, 244, 1);
    --book-hover: rgba(3, 169, 244, 1);
    --pencil-hover: rgba(0, 150, 136, 1); 
    --key-hover: rgb(251, 192, 45);
    --dolar-hover: rgba(3, 169, 244, 1);
    --plus-hover: rgba(71, 164, 71, 1);
    --table-hover: rgba(255, 152, 0, 1);
    --change-hover: rgba(3, 169, 244, 1);
    --comment-hover: rgba(255, 133, 24, 1);
    --active-hover: rgb(0, 128, 0, 1);
    --graduated-hover: rgb(255, 165, 0, 1);
    --stop-hover: rgba(255, 65, 54, 1);
    --print-certificate-hover: rgba(179, 125, 0, 1);
    --simple-plus-hover: rgba(71, 164, 71, 1);
    --th-list-hover:  rgba(3, 169, 244, 1);
    --bars-hover: rgba(3, 169, 244, 1);
    --view-table-hover: rgba(3, 169, 244, 1);
    --chevron-up-hover: rgba(66, 139, 202 ,1);
    --arrow-left-hover: rgb(250, 188, 61, 1);
    --group-hover: rgba(3, 169, 244, 1);
    --refresh-hover: rgba(3, 169, 244, 1);
    --close-hover: rgba(153, 153, 153, 1);
    --circle-hover: var(--bodyColor);
    --complete-hover: rgba(0, 150, 136,1);
    --check-hover: rgba(0, 150, 136, 1);
    --cancel-hover: rgba(255, 65, 54, 1);

    --icon-view: '\f06e';
    --icon-print: '\f02f';
    --icon-delete: '\f1f8';
    --icon-update: '\f044';
    --icon-drop: '\f142';
    --icon-release: '\f079';
    --icon-member: '\f0f0'; /*\f0f0 \f007*/
    --icon-book: '\f02d';
    --icon-pencil: '\f040';
    --icon-key: '\f084'; 
    --icon-dolar: '\f155';
    --icon-plus: '\f055';
    --icon-table: '\f0ce';
    --icon-change: '\f0ec';
    --icon-comment: '\f075';
    --icon-active: '\f046';
    --icon-graduated: '\f19d';
    --icon-stop: '\f05e';
    --icon-simple-plus: '\f067';
    --icon-th-list: '\f00b';
    --icon-bars: '\f0c9';
    --icon-view-table: '\f0ce';
    --icon-chevron-up: '\f077';
    --icon-arrow-left: '\f060';
    --icon-group: '\f0c0';
    --icon-refresh: '\f021';
    --icon-close: '\f00d';
    --icon-circle: '\f05d';
    --icon-complete: '\f058';
    --icon-check: '\f00c';
    --icon-cancel: '\f00d';
}

table .btn-container {
    margin: auto;
    position: relative;
    width: fit-content;
    display: flex;
}

/*style for btn-icon*/
table .btn-container .btn-icon,
.page-header .btn-container .btn-icon,
.toolbar .btn-container .btn-icon,
.ImageWrapper .btn-container .btn-icon {
    all: unset;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid var(--drop);
    color: var(--drop);
    font-size: 1.1em;
    outline: none;
    border-radius: 3px;
    height: 25px;
    width: 25px;
    margin: 0 2px;
    transition: 0.3s ease-in-out;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.page-header .btn-container .btn-icon {
    font-size: 0.8em;
}
.toolbar .btn-container .btn-icon {
    font-size: 0.7em;
    box-sizing: unset;
    padding : 0 !important;
}
.toolbar .btn-container{
    display: flex;
    padding: 10px 15px 10px;
}

.minimize-box.btn-chevron-up:before {
    transform: translateY(-2px) rotate(0deg);
    transition: all .4s;
}
.minimize-box.rotate.btn-chevron-up:before{
    transform:  translateY(1px) rotate(180deg);
}

/*----------set icon for default icon----------*/
table .btn-container .icon-view::before {
    content: var(--icon-view);
    font-family: fontAwesome;
    color: var(--view);
}

table .btn-container .icon-print::before {
    content: var(--icon-print);
    font-family: fontAwesome;
    color: var(--print);
}

table .btn-container .icon-delete::before,
.page-header .btn-container .icon-delete::before,
.ImageWrapper .btn-container .icon-delete::before {
    content: var(--icon-delete);
    font-family: fontAwesome;
    color: var(--delete);
}

table .btn-container .icon-update::before,
.page-header .btn-container .icon-update::before {
    content: var(--icon-update);
    font-family: fontAwesome;
    color: var(--update);
    transform: translate(1px,1px);
}

table .btn-container .icon-release::before {
    content: var(--icon-release);
    font-family: fontAwesome;
    color: var(--release);
}

table .btn-container .icon-member::before {
    content: var(--icon-member);
    font-family: fontAwesome;
    color: var(--member);
}

table .btn-container .icon-book::before {
    content: var(--icon-book);
    font-family: fontAwesome;
    color: var(--book);
}

table .btn-container .icon-pencil::before,
.ImageWrapper .btn-container .icon-pencil::before {
    content: var(--icon-pencil);
    font-family: fontAwesome;
    color: var(--pencil);
}

table .btn-container .icon-key::before,
.toolbar .btn-container .icon-key::before {
    content: var(--icon-key);
    font-family: fontAwesome;
    color: var(--key);
}

table .btn-container .icon-plus::before,
.page-header .btn-container .icon-plus::before {
    content: var(--icon-plus);
    font-family: fontAwesome;
    color: var(--plus);
}

table .btn-container .icon-dolar::before {
    content: var(--icon-dolar);
    font-family: fontAwesome;
    color: var(--dolar);
}

table .btn-container .icon-table::before {
    content: var(--icon-table);
    font-family: fontAwesome;
    color: var(--table);
}

table .btn-container .icon-change::before {
    content: var(--icon-change);
    font-family: fontAwesome;
    color: var(--change);
}

table .btn-container .icon-comment::before {
    content: var(--icon-comment);
    font-family: fontAwesome;
    color: var(--comment);
}

table .btn-container .icon-active::before {
    content: var(--icon-active);
    font-family: fontAwesome;
    color: var(--active);
}

table .btn-container .icon-graduated::before {
    content: var(--icon-graduated);
    font-family: fontAwesome;
    color: var(--graduated);
}

table .btn-container .icon-stop::before {
    content: var(--icon-stop);
    font-family: fontAwesome;
    color: var(--stop);
}

table .btn-container .icon-print-certificate::before {
    content: var(--icon-print);
    font-family: fontAwesome;
    color: var(--print-certificate);
}

table .btn-container .icon-simple-plus::before,
.toolbar .btn-container .icon-simple-plus::before {
    content: var(--icon-simple-plus);
    font-family: fontAwesome;
    color: var(--simple-plus);
}

table .btn-container .icon-th-list::before,
.toolbar .btn-container .icon-th-list::before {
    content: var(--icon-th-list);
    font-family: fontAwesome;
    color: var(--th-list);
}

table .btn-container .icon-bars::before,
.toolbar .btn-container .icon-bars::before {
    content: var(--icon-bars);
    font-family: fontAwesome;
    color: var(--bars);
}

table .btn-container .icon-view-table::before,
.toolbar .btn-container .icon-view-table::before {
    content: var(--icon-view-table);
    font-family: fontAwesome;
    color: var(--view-table);
}

table .btn-container .icon-chevron-up::before,
.toolbar .btn-container .icon-chevron-up::before {
    content: var(--icon-chevron-up);
    font-family: fontAwesome;
    color: var(--chevron-up);
}

table .btn-container .icon-arrow-left::before,
.toolbar .btn-container .icon-arrow-left::before {
    content: var(--icon-arrow-left);
    font-family: fontAwesome;
    color: var(--arrow-left);
}

table .btn-container .icon-group::before,
.toolbar .btn-container .icon-group::before {
    content: var(--icon-group);
    font-family: fontAwesome;
    color: var(--group);
}

table .btn-container .icon-refresh::before {
    content: var(--icon-refresh);
    font-family: fontAwesome;
    color: var(--refresh);
}

table .btn-container .icon-close::before {
    content: var(--icon-close);
    font-family: fontAwesome;
    color: var(--close);
}

table .btn-container .icon-circle::before {
    content: var(--icon-circle);
    font-family: fontAwesome;
    color: var(--circle);
}

table .btn-container .icon-complete::before {
    content: var(--icon-complete);
    font-family: fontAwesome;
    color: var(--complete);
}

table .btn-container .icon-check::before {
    content: var(--icon-check);
    font-family: fontAwesome;
    color: var(--check);
}

table .btn-container .icon-cancel::before {
    content: var(--icon-cancel);
    font-family: fontAwesome;
    color: var(--cancel);
}

table .btn-container .icon-drop::before {
    content: var(--icon-drop);
    font-family: fontAwesome;
}

table .btn-container .no-icon::before {
    content: '';
}
/*----------------------------------------------*/
/*----------set color for dynamic icon----------*/
table .btn-container .btn-delete i,
table .btn-container .drop-content .a-delete i,
.ImageWrapper .btn-container .btn-delete i {
    color: var(--delete);
}

table .btn-container .btn-drop i,
table .btn-container .drop-content .a-drop i {
    color: var(--list);
}

table .btn-container .btn-view i,
table .btn-container .drop-content .a-view i {
    color: var(--view);
}

table .btn-container .btn-print i,
table .btn-container .drop-content .a-print i {
    color: var(--print);
}

table .btn-container .drop-content .a-active i {
    color: var(--active);
}

table .btn-container .drop-content .a-graduated i {
    color: var(--graduated);
}

table .btn-container .drop-content .a-stop i {
    color: var(--stop);
}

table .btn-container .drop-content .a-update i {
    color: var(--update);
}

table .btn-container .btn-member i{
    color: var(--member);
}

table .btn-container .btn-book i{
    color: var(--book);
}

table .btn-container .btn-pencil i,
.ImageWrapper .btn-container .btn-pencil i {
    color: var(--pencil);
}

table .btn-container .btn-key i,
.toolbar .btn-container .btn-key i{
    color: var(--key);
}

table .btn-container .btn-plus i,
.page-header .btn-container .btn-plus i{
    color: var(--plus);
}

table .btn-container .btn-dolar i{
    color: var(--dolar);
}

table .btn-container .btn-change i{
    color: var(--change);
}

table .btn-container .btn-comment i{
    color: var(--comment);
}

table .btn-container .btn-drop i{
    color: var(--drop);
}

table .btn-container .btn-print-certificate i{
    color: var(--print-certificate);
}

table .btn-container .btn-simple-plus i,
.toolbar .btn-container .btn-simple-plus i{
    color: var(--print-certificate);
}

table .btn-container .btn-th-list i,
.toolbar .btn-container .btn-th-list i{
    color: var(--th-list);
}

table .btn-container .btn-bars i,
.toolbar .btn-container .btn-bars i{
    color: var(--bars);
}

table .btn-container .btn-view-table i,
.toolbar .btn-container .btn-view-table i{
    color: var(--view-table);
}

table .btn-container .btn-chevron-up i,
.toolbar .btn-container .btn-chevron-up i{
    color: var(--chevron-up);
}

table .btn-container .btn-arrow-left i,
.toolbar .btn-container .btn-arrow-left i{
    color: var(--arrow-left);
}

table .btn-container .btn-group i,
.toolbar .btn-container .btn-group i{
    color: var(--group);
}

table .btn-container .btn-check i,
.toolbar .btn-container .btn-check i{
    color: var(--check);
}

table .btn-container .btn-cancel i,
.toolbar .btn-container .btn-cancel i{
    color: var(--cancel);
}

table .btn-container .btn-refresh i{
    color: var(--refresh);
}
/*------------------------------------------------*/
/*---------set border for each btn-icon-----------*/
table .btn-container .btn-print {
    border: 1px solid var(--print);
}

table .btn-container .btn-update,
.page-header .btn-container .btn-update{
    border: 1px solid var(--update);
}

table .btn-container .btn-delete,
.page-header .btn-container .btn-delete,
.ImageWrapper .btn-container .btn-delete {
    border: 1px solid var(--delete);
}

table .btn-container .btn-view {
    border: 1px solid var(--view);
}

table .btn-container .btn-member {
    border: 1px solid var(--member);
}

table .btn-container .btn-book {
    border: 1px solid var(--book);
}

table .btn-container .btn-pencil,
.ImageWrapper .btn-container .btn-pencil {
    border: 1px solid var(--pencil);
}

table .btn-container .btn-key,
.toolbar .btn-container .btn-key {
    border: 1px solid var(--key);
}

table .btn-container .btn-plus,
.page-header .btn-container .btn-plus {
    border: 1px solid var(--plus);
}

table .btn-container .btn-dolar {
    border: 1px solid var(--dolar);
}

table .btn-container .btn-change {
    border: 1px solid var(--change);
}

table .btn-container .btn-comment {
    border: 1px solid var(--comment);
}

table .btn-container .btn-print-certificate {
    border: 1px solid var(--print-certificate);
}

table .btn-container .btn-simple-plus,
.toolbar .btn-container .btn-simple-plus {
    border: 1px solid var(--simple-plus);
}

table .btn-container .btn-th-list,
.toolbar .btn-container .btn-th-list {
    border: 1px solid var(--th-list);
}

table .btn-container .btn-bars,
.toolbar .btn-container .btn-bars {
    border: 1px solid var(--bars);
}

table .btn-container .btn-view-table,
.toolbar .btn-container .btn-view-table {
    border: 1px solid var(--view-table);
}

table .btn-container .btn-chevron-up,
.toolbar .btn-container .btn-chevron-up {
    border: 1px solid var(--chevron-up);
}

table .btn-container .btn-arrow-left,
.toolbar .btn-container .btn-arrow-left {
    border: 1px solid var(--arrow-left);
}

table .btn-container .btn-group,
.toolbar .btn-container .btn-group {
    border: 1px solid var(--group);
}

table .btn-container .btn-refresh {
    border: 1px solid var(--refresh);
}

table .btn-container .btn-close {
    border: 1px solid var(--close);
}

table .btn-container .btn-circle {
    border: 1px solid var(--circle);
}

table .btn-container .btn-complete {
    border: 1px solid var(--complete);
}

table .btn-container .btn-check {
    border: 1px solid var(--check);
}

table .btn-container .btn-cancel {
    border: 1px solid var(--cancel);
}
/*--------------------------------------------*/
/*----------style fo btn-container------------*/
table .btn-container .drop-content {
    position: absolute;
    z-index: 2;
    background: white;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    border-radius: 4px;
    width: 170px;
    height: auto;
    font-weight: normal;
    font-size: 1.1em;
    transform: scale(0,0);
    right: 2px;
    top: 29px;
    transition: all .0s;
    transform-origin: top right;
}

table .btn-container .drop-content .drop-content-body {
    opacity: 0;
    display: flex;
    flex-direction: column;
}

table .btn-container .drop-content.show {
    transition: all .3s ease;
    transform: scale(1,1);
}

table .btn-container .drop-content.show .drop-content-body {
    opacity: 1;
    transition: all .1s ease .2s;
}

table .drop-content a {
    color: #5a5a5a;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    padding: 6px 0;
    text-align: left;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0,0,0,.2);
}

/*----------set margin for each icon in drop-content-----------*/
table .btn-container .drop-content .drop-content-body i,
table .btn-container .drop-content .icon-view::before,   /*before is default icon*/
table .btn-container .drop-content .icon-print::before,
table .btn-container .drop-content .icon-delete::before,
table .btn-container .drop-content .icon-update::before,
table .btn-container .drop-content .icon-release::before,
table .btn-container .drop-content .icon-table::before,
table .btn-container .drop-content .icon-plus::before,
table .btn-container .drop-content .icon-pencil::before,
table .btn-container .drop-content .icon-book::before,
table .btn-container .drop-content .icon-active::before,
table .btn-container .drop-content .icon-graduated::before,
table .btn-container .drop-content .icon-stop::before{
    margin: 0 10px 0 15px;
}

/*////////////////////////////////  Set style when hover on button /////////////////////////////////////*/
table .btn-container a:hover i,   /*set color for button i*/
table .btn-container .btn-drop.b-active,
table .btn-container a.btn-icon:hover::before, 
table .btn-container button:hover::before,    /*set color for .icon-view*/
.page-header .btn-container button:hover::before,
.page-header .btn-container a:hover::before,
.toolbar .btn-container button:hover::before,
.toolbar .btn-container a:hover::before,
.ImageWrapper .btn-container button:hover::before,
.ImageWrapper .btn-container a:hover::before, 
.ImageWrapper .btn-container label:hover::before { 
    color: #fff;
}

table .btn-container .btn-view:hover {
    background: var(--view-hover);
}

table .btn-container .btn-print:hover {
    background: var(--print-hover);
}

table .btn-container .btn-delete:hover,
.page-header .btn-container .btn-delete:hover,
.ImageWrapper .btn-container .btn-delete:hover {
    background: var(--delete-hover);
    border-color: var(--delete-hover);
}

table .btn-container .btn-update:hover,
.page-header .btn-container .btn-update:hover {
    background: var(--update-hover);
    border-color: var(--update-hover);
}

table .btn-container .btn-member:hover {
    background: var(--member-hover);
    border-color: var(--member-hover);
}

table .btn-container .btn-book:hover {
    background: var(--book-hover);
    border-color: var(--book-hover);
}

table .btn-container .btn-pencil:hover,
.ImageWrapper .btn-container .btn-pencil:hover {
    background: var(--pencil-hover);
    border-color: var(--pencil-hover);
}

table .btn-container .btn-key:hover,
.toolbar .btn-container .btn-key:hover {
    background: var(--key-hover);
    border-color: var(--key-hover);
}

table .btn-container .btn-plus:hover,
.page-header .btn-container .btn-plus:hover {
    background: var(--plus-hover);
    border-color: var(--plus-hover);
}

table .btn-container .btn-dolar:hover {
    background: var(--dolar-hover);
    border-color: var(--dolar-hover);
}

table .btn-container .btn-change:hover {
    background: var(--change-hover);
    border-color: var(--change-hover);
}

table .btn-container .btn-comment:hover {
    background: var(--comment-hover);
    border-color: var(--comment-hover);
}

table .btn-container .btn-print-certificate:hover {
    background: var(--print-certificate-hover);
    border-color: var(--print-certificate-hover);
}

table .btn-container .btn-simple-plus:hover,
.toolbar .btn-container .btn-simple-plus:hover {
    background: var(--simple-plus-hover);
    border-color: var(--simple-plus-hover);
}

table .btn-container .btn-th-list:hover,
.toolbar .btn-container .btn-th-list:hover {
    background: var(--th-list-hover);
    border-color: var(--th-list-hover);
}

table .btn-container .btn-bars:hover,
.toolbar .btn-container .btn-bars:hover {
    background: var(--bars-hover);
    border-color: var(--bars-hover);
}

table .btn-container .btn-view-table:hover,
.toolbar .btn-container .btn-view-table:hover {
    background: var(--view-table-hover);
    border-color: var(--view-table-hover);
}

table .btn-container .btn-chevron-up:hover,
.toolbar .btn-container .btn-chevron-up:hover {
    background: var(--chevron-up-hover);
    border-color: var(--chevron-up-hover);
}

table .btn-container .btn-arrow-left:hover,
.toolbar .btn-container .btn-arrow-left:hover {
    background: var(--arrow-left-hover);
    border-color: var(--arrow-left-hover);
}

table .btn-container .btn-group:hover,
.toolbar .btn-container .btn-group:hover {
    background: var(--group-hover);
    border-color: var(--group-hover);
}

table .btn-container .btn-refresh:hover{
    background: var(--refresh-hover);
    border-color: var(--refresh-hover);
}

table .btn-container .btn-close:hover{
    background: var(--close-hover);
    border-color: var(--close-hover);
}

table .btn-container .btn-circle:hover{
    background: var(--circle-hover);
    border-color: var(--circle-hover);
}

table .btn-container .btn-complete:hover{
    background: var(--complete-hover);
    border-color: var(--complete-hover);
}

table .btn-container .btn-check:hover,
.toolbar .btn-container .btn-check:hover {
    background: var(--check-hover);
    border-color: var(--check-hover);
}

table .btn-container .btn-cancel:hover,
.toolbar .btn-container .btn-cancel:hover {
    background: var(--cancel-hover);
    border-color: var(--cancel-hover);
}

table .btn-container .btn-drop:hover,
table .btn-container .btn-drop.b-active {
    background: var(--drop-hover);
}

/*/////////////////////////////////////// hover for drop content items ///////////////////////////////////////////*/
table .btn-container .drop-content .a-view:hover {
    border-left: 5px solid var(--view-hover);
}

table .btn-container .drop-content .a-delete:hover {
    border-left: 5px solid var(--delete-hover);
}

table .btn-container .drop-content .a-update:hover {
    border-left: 5px solid var(--update-hover);
}

table .btn-container .drop-content .a-print:hover {
    border-left: 5px solid var(--print-hover);
}

table .btn-container .drop-content .a-release:hover {
    border-left: 5px solid var(--release-hover);
}

table .btn-container .drop-content .a-table:hover {
    border-left: 5px solid var(--table-hover);
}

table .btn-container .drop-content .a-plus:hover {
    border-left: 5px solid var(--plus-hover);
}

table .btn-container .drop-content .a-book:hover {
    border-left: 5px solid var(--plus-hover);
}

table .btn-container .drop-content .a-pencil:hover {
    border-left: 5px solid var(--pencil-hover);
}

table .btn-container .drop-content .a-active:hover {
    border-left: 5px solid var(--active-hover);
}

table .btn-container .drop-content .a-graduated:hover {
    border-left: 5px solid var(--graduated-hover);
}

table .btn-container .drop-content .a-stop:hover {
    border-left: 5px solid var(--stop-hover);
}

/*-------Set style for disable icon----------*/
.btn-container .disabled{
    pointer-events:none !important;
    opacity: .6 !important;
}