.show {
	display: flex;
}

.hide {
	display: none;
}


/* Flat Grey Buttons */

.flat-btn {
    display: inline-block;
    background-color: #6c757d;
    color: white;
    padding: 6px 12px 6px 30px; 
    border: none;
    border-radius: 4px;
    font-size: 14px; /* inherited line-height: 1.5 */
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    background-repeat: no-repeat;
    background-size: 17px;
    background-position: left 7px top 7px;
}

.flat-btn:hover {
    background-color: #5a6268;
    background-repeat: no-repeat;
    background-size: 19px;
    background-position: left 5px top 6px;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.add-btn {
    background-image: url("/img/add.svg");
}
.add-btn:hover {
    background-image: url("/img/add.svg");
}

.back-btn {
    background-image: url("/img/back.svg");
}
.back-btn:hover {
    background-image: url("/img/back.svg");
}

.view-btn {
    background-color: #6B8E8E;
    background-image: url("/img/view.svg");
}
.view-btn:hover {
    background-color: #378282;
    background-image: url("/img/view.svg");
}


/* Flat Outlined Buttons */

.flat-outline-btn {
    float: right;
    background: transparent;
    border: 1px solid #6B8E8E;
    color: #415555;
    padding: 4px 12px 4px 28px;
    border-radius: 4px;
    font-size: 12px; /* inherited line-height: 1.5 */
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: left 4px top 4px;
}

.flat-outline-btn:hover {
    color: white;
    background: #5a6268;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: left 3px top 3px;
}

.flat-outline-btn:disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}


.edit-btn {
    background-image: url("/img/edit.svg");
    
}
.edit-btn:hover {
    background-image: url("/img/edith.svg");
}

.lightadd-btn {
    background-size: 17px;
    background-image: url("/img/addh.svg");
}
.lightadd-btn:hover {
    background-size: 17px;
    background-image: url("/img/add.svg");
}
.lightadd-btn.active {
    color: white;
    background: #5a6268;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: left 3px top 3px;
    background-image: url("/img/add.svg");
}

.search-btn {
    background-size: 17px;
    background-image: url("/img/search.svg");
}
.search-btn:hover {
    background-size: 17px;
    background-image: url("/img/searchh.svg");
}
.search-btn.active {
    color: white;
    background: #5a6268;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: left 3px top 3px;
    background-image: url("/img/searchh.svg");
}

.viewflat-btn {
    background-size: 17px;
    background-image: url("/img/viewf.svg");
}
.viewflat-btn:hover {
    background-size: 17px;
    background-image: url("/img/view.svg");
}
.viewflat-btn.active {
    background-size: 17px;
    background-image: url("/img/viewf.svg");
}
.viewflat-btn.active:hover {
    background-size: 17px;
    background-image: url("/img/view.svg");
}

.viewnoflat-btn {
    background-size: 17px;
    background-image: url("/img/viewfno.svg");
}
.viewnoflat-btn:hover {
    background-size: 17px;
    background-image: url("/img/viewno.svg");
}

.aicheck-btn {
    background-image: url("/img/aicheck.svg");
    
}
.aicheck-btn:hover {
    background-image: url("/img/aicheckh.svg");
}

.aigenerate-btn {
    background-image: url("/img/aigenerate.svg");
    
}
.aigenerate-btn:hover {
    background-image: url("/img/aigenerateh.svg");
}


/* Big thick Buttons */

.big-btn {
	display: inline-block;
    color: white;
    padding: 12px 12px 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 14px; /* inherited line-height: 1.5 */
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left 5px top 11px;
}

.big-btn:hover {
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: left 4px top 10px;
}

.big-btn:disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}


.bigadd-btn {
    background-color: #28a745;
    background-image: url("/img/add.svg");
    
}
.bigadd-btn:hover {
    background-color: #218838;
    background-image: url("/img/add.svg");
}


.bigmenuadd-btn {
    background-color: #28a745;
    background-image: url("/img/add.svg");
    
}
.bigmenuadd-btn:hover {
    background-color: #218838;
    background-image: url("/img/add.svg");
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.bigsave-btn {
    background-color: #28a745;
    background-image: url("/img/save.svg");
    
}
.bigsave-btn:hover {
    background-color: #218838;
    background-image: url("/img/save.svg");
}

.bigcancel-btn {
    background-color: #dc3545;
    background-image: url("/img/cancel.svg");
    
}
.bigcancel-btn:hover {
    background-color: #c82333;
    background-image: url("/img/cancel.svg");
}

.bigremove-btn {
    background-color: #dc3545;
    background-image: url("/img/delete.svg");
    
}
.bigremove-btn:hover {
    background-color: #c82333;
    background-image: url("/img/delete.svg");
}

.bigcrumb-btn {
    background-color: #415555;
    background-image: url("/img/right.svg");
    
}
.bigcrumb-btn:hover {
    background-color: #554341;
    background-image: url("/img/right.svg");
}

.bigcrumb-dispcat {
	margin-top: 5px;
    background-color: #415555;
    background-image: url("/img/right.svg");
	pointer-events: none;   
}

.bigcrumb-dispfram {
    background-color: #6c757d;
    background-image: url("/img/formula.svg");
	pointer-events: none;   
}