:root {
    --border-radius: 24px;
    --success-btn: #00D5B0;
    --success-btn-hover: #45d3bb;
    --success-btn-2: #0DA98E;
    --success-btn-3: #419d8e;
    --warning-btn: #f59c1a;
    --warning-btn-hover: #f3aa3b;
    --warning-btn-2: #C26507;
    --warning-btn-2-hover: #c07830;
    --danger-btn: #D70D32;
    --danger-btn-hover: #d63855;
    --info-btn: #54d6fd;
    --info-btn-hover: #83dcf7;
    --white:#fff;
}

/*------------------------
generic buttons
-------------------------*/
.dataTable-btn, .bw-btn {
    display: inline-flex !important;
    align-items: center;
    cursor: pointer;
    background-color: transparent;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5rem 1rem;
    margin: 4px 5px;
    font-size: 13px;
    color: var(--white);
    column-gap: 0.25rem;
    border-radius: var(--border-radius) !important;
    text-align: center;
}

.btn{
    border-radius: var(--border-radius) !important;
    line-height: 1.8;
}

.btn-danger {
    color: var(--white);
    border: 2px solid var(--danger-btn);
    background: var(--danger-btn);
}

.btn-danger-inverse {
    color: var(--danger-btn);
    border: 2px solid var(--danger-btn);
    background: transparent
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger-inverse:hover,
.btn-danger-inverse:focus,
.btn.btn-danger-inverse:hover,
.btn.btn-danger-inverse:focus{
    color: var(--white);
    background-color: var(--danger-btn-hover);
    border-color: var(--danger-btn-hover);
}

.btn-success {
    color: var(--white);
    border: 2px solid var(--success-btn);
    background: var(--success-btn);
}

.btn-success-inverse {
    color: var(--success-btn);
    border: 2px solid var(--success-btn);
    background: transparent;
}

.btn-success:hover,
.btn-success:focus,
.btn-success-inverse:hover,
.btn-success-inverse:focus,
.btn.btn-success-inverse:hover,
.btn.btn-success-inverse:focus{
    color: var(--white);
    background-color: var(--success-btn-hover);
    border-color: var(--success-btn-hover);
}

.btn-warning {
    color: var(--white);
    border: 2px solid var(--warning-btn);
    background: var(--warning-btn);
}

.btn-warning-inverse {
    color: var(--warning-btn);
    border: 2px solid var(--warning-btn);
    background: transparent;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning-inverse:hover,
.btn-warning-inverse:focus,
.btn.btn-warning-inverse:hover,
.btn.btn-warning-inverse:focus{
    color: var(--white);
    background-color: var(--warning-btn-hover);
    border-color: var(--warning-btn-hover);
}

.btn-info {
    color: var(--white);
    border: 2px solid var(--info-btn);
    background: var(--info-btn);
}

.btn-info-inverse {
    color: var(--info-btn);
    border: 2px solid var(--info-btn);
    background: transparent;
}

.btn-info:hover,
.btn-info:focus,
.btn-info-inverse:hover,
.btn-info-inverse:focus,
.btn.btn-info-inverse:hover,
.btn.btn-info-inverse:focus{
    color: var(--white);
    background-color: var(--info-btn-hover);
    border-color: var(--info-btn-hover);
}

.btn-default {
    color: var(--white);
    border: 2px solid var(--text-color);
    background: var(--text-color);
}

.btn-default-inverse {
    color: var(--text-color);
    border: 2px solid var(--text-color);
    background: transparent;
}

.btn-default:hover,
.btn-default:focus,
.btn-default-inverse:hover,
.btn-default-inverse:focus,
.btn.btn-default-inverse:hover,
.btn.btn-default-inverse:focus{
    color: var(--white);
    background-color: var(--text-color);
    border-color: var(--text-color);
}


/*------------------------
admin
-------------------------*/
.btn-order {
    border: 1px solid;
    border-radius: var(--border-radius);
    background: var(--white);
    color: var(--brandprimary);
}

.btn-order:hover, .btn-order:focus {
    border: 1px solid;
    border-radius: var(--border-radius);
    background: var(--brandprimary);
    color: var(--white);
}

.btn-ad-brand,
.btn-ad-brand:focus
.btn.btn-ad-brand,
.btn.btn-ad-brand:focus {
    border-radius: var(--border-radius);
    color: var(--brandprimary);
    border-color: var(--brandprimary);
    background: transparent;
}

.btn-ad-brand:hover {
    color: var(--white) !important;
    background: var(--brandprimary);
}

.btn-ad-brand-red,
.btn-ad-brand-red:focus {
    border-radius: var(--border-radius);
    color: var(--danger-btn);
    border-color: var(--danger-btn);
    background: transparent;
}

.btn-ad-brand-red:hover {
    color: var(--white) !important;
    background: var(--danger-btn);
}

.btn-ad-brand-inverse,
.btn-ad-brand-inverse:focus {
    color: var(--white);
    border-color: var(--white);
}

.btn-ad-brand-inverse:hover {
    color: var(--text-color) !important;
    background: var(--white);
}

.btn-save,
.btn.btn-save,
a.btn.btn-save,
.panel-heading a.btn.btn-save {
    border-radius: var(--border-radius);
    color: var(--white) !important;
    border-color: var(--brandsecondary);
    background: var(--brandsecondary);
    height: auto;
    padding: 0.7rem 3rem !important;
    white-space: normal;
}

.btn-save-auto,
.btn-save-auto:focus,
.btn.btn-save-auto,
.btn.btn-save-auto:focus{
    margin: 0.15rem 0;
    border-radius: var(--border-radius);
    color: var(--white);
    border-color: var(--brandsecondary);
    background: var(--brandsecondary);
}

.btn-save-default,
.btn-save-default:focus,
.btn.btn-save-default,
.btn.btn-save-default:focus{
    border-radius: var(--border-radius);
    color: var(--white);
    border-color: var(--brandsecondary);
    background: var(--brandsecondary);
}

.btn-padding {
    padding: 0.7rem 3rem;
}

.btn-save:hover, .btn-save:focus,
.btn.btn-save:hover, .btn.btn-save:focus,
.btn-save-auto:hover, .btn-save-auto:focus,
.btn.btn-save-auto:hover, .btn.btn-save-auto:focus,
.btn-save-default:hover, .btn-save-default:focus,
.btn.btn-save-default:hover, .btn.btn-save-default:focus,
.btn-save-auto.btn-success:not(:disabled):not(.disabled):active,
a.btn.btn-save:hover {
    border-color: var(--buttonhover-2);
    background: var(--buttonhover-2);
    color: var(--white);
}

.btn-ad-secondary,
.btn-ad-secondary:focus {
    border-radius: 12px;
    color: var(--white);
    border-color: #CBF6EE;
    background: #CBF6EE;
    padding: 0.3rem 2.5rem;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-ad-secondary > iconify-icon {
    color: var(--success-btn) ;
    font-size: 30px;
}

.btn-cancel,
.btn-cancel:focus {
    border-radius: var(--border-radius) !important;
    color: var(--white) !important;
    border-color: var(--text-color) !important;
    background: var(--text-color) !important;
    padding: 0.7rem 3rem !important;
    height: auto !important
}

.btn-adminbrand, .btn-adminbrand:focus {
    border-radius: var(--border-radius);
    color: var(--brandprimary);
    border-color: var(--brandprimary);
    background: transparent;
}

.btn.btn-outline-colors {
    color: var(--white);
    border-color: var(--white);
    background: none;
    border-width: 2px;
    font-weight: 600;
    padding: 6px 25px;
    text-transform: uppercase;
    line-height: 1.5;
    font-size: 12px;
}

.btn.btn-outline-colors:hover, .btn.btn-outline-colors:focus {
    color: var(--brandprimary);
    border-color: var(--white);
    background: var(--white);
}

.view-booking-modal .btn-success {
    color: var(--white);
    background-color: var(--brandsecondary);
    border-color: var(--brandsecondary);
    border-radius: var(--border-radius);
    padding: 13px 25px;
    font-size: 14px;
}

.view-booking-modal .btn-success:hover {
    color: var(--white);
    background-color: var(--brandsecondary);
    border-color: var(--brandsecondary);
}

.view-booking-modal .btn-danger {
    color: var(--brandprimary);
    background-color: transparent;
    border-color: var(--brandprimary);
    border-radius: var(--border-radius);
    padding: 12px 25px;
    font-size: 14px;
}

.view-booking-modal .btn-danger:not(:disabled):not(.disabled):active {
    color: var(--brandprimary);
    background-color: transparent;
    border-color: var(--brandprimary);
    border-radius: 12px;
    padding: 12px 25px;
    font-size: 14px;
}

.view-booking-modal .btn-danger:hover {
    color: var(--brandprimary);
    background-color: transparent;
    border-color: var(--brandprimary);
}

.resource-tabs .dataTable-content .dataTable-btn-table-function:not(.dataTable-bulk-delete) {
    color: var(--purple) !important;
    font-size: 1.3rem !important;
    background: var(--bg-content-color);
}

.btn-room .btn-danger {
    color: var(--brandprimary);
    background-color: transparent;
    border-color: var(--brandprimary);
    border-radius: var(--border-radius);
    padding: 12px 25px;
    font-size: 14px;
}

.btn-room a:hover {
    background: transparent !important;
    text-decoration: none;
    border-color: var(--brandprimary);
    color: var(--brandprimary);
}

.btn-room .btn-danger:not(:disabled):not(.disabled):active {
    background: transparent !important;
    text-decoration: none;
    border-color: var(--brandprimary);
    color: var(--brandprimary);
}

.btn-create.btn-success {
    color: var(--white);
    background-color: var(--brandsecondary);
    border-color: var(--brandsecondary);
    border-radius: var(--border-radius);
    padding: 12px 25px;
    font-size: 14px;
    margin-left: 1rem;
    margin-bottom: .5rem;
}

.btn-create.btn-success:focus, .btn-create.btn-success:hover,
.btn-create.btn-success:not(:disabled):not(.disabled):active{
    border-radius: var(--border-radius);
    color: var(--white);
    border-color: var(--buttonhover-2);
    background: var(--buttonhover-2);
}

.btn-create.btn-danger {
    background-color: var(--danger-btn) ;
    border-color: var(--danger-btn) ;
}

.btn-create.btn-danger:hover {
    background: var(--danger-btn) !important;
    text-decoration: none;
}

.btn-create.btn-success iconify-icon,
.back-btn iconify-icon {
    font-size: 13px;
    margin-right: 5px;
}

.back-btn {
    color: var(--brandprimary);
    background-color: transparent;
    border-color: var(--brandprimary);
    border-radius: var(--border-radius);
    padding: 12px 20px;
    font-size: 14px;
    border: 2px solid;
    margin-left: 1rem;
    margin-bottom: .5rem;
}

.Plan-btn {
    color: var(--brandprimary);
    background-color: transparent;
    border-color: var(--brandprimary);
    border-radius: 0px;
    padding: 1px;
    font-size: 14px;
    border-bottom: 1px solid var(--brandprimary);
    margin-right: 10px;
}

.Plan-btn:focus, .Plan-btn:hover {
    color: var(--brandprimary);
    text-decoration: none;
}

.back-btn:hover, .back-btn:focus {
    background: var(--brandprimary);
    text-decoration: none;
    border-color: var(--brandprimary);
    color: var(--white) !important;
}

.background-color .btn-outline-light {
    color: var(--brandprimary);
    border-color: var(--bg-content-color);
    background-color: var(--bg-content-color);
    padding-left: 48px !important;
    padding-right: 48px !important;
}

.background-color .btn-outline-light:hover {
    color: var(--brandprimary);
    background-color: var(--brandtertiary);
    border-color: var(--brandtertiary);
}

.background-color .btn-outline-light:not(:disabled):not(.disabled).active,
.background-color .btn-outline-light:not(:disabled):not(.disabled):active,
.background-color .show > .btn-outline-light.dropdown-toggle {
    color: var(--brandprimary);
    background-color: var(--brandtertiary);
    border-color: var(--brandtertiary);
}

.background-color .btn-outline-light.disabled,
.background-color .btn-outline-light:disabled {
    color: var(--brandprimary);
    background-color: var(--brandtertiary);
}

.send-message .btn-success {
    color: var(--white);
    background-color: var(--brandsecondary);
    border-color: var(--brandsecondary);
    border-radius: var(--border-radius);
    padding: 12px 25px;
    font-size: 14px;
}

.send-message .btn-danger {
    color: var(--brandprimary);
    background-color: transparent;
    border-color: var(--brandprimary);
    border-radius: var(--border-radius);
    padding: 12px 25px;
    font-size: 14px;
}

.send-message .btn-danger:not(:disabled):not(.disabled):active {
    color: var(--brandprimary);
    background-color: transparent;
    border-color: var(--brandprimary);
}

.save-btn .btn-success {
    color: var(--white);
    background-color: var(--brandsecondary);
    border-color: var(--brandsecondary);
}

.save-btn .btn-success:hover, .save-btn .btn-success:focus, .save-btn .btn-success:not(:disabled):not(.disabled):active {
    color: var(--white);
    background-color: var(--brandsecondary);
    border-color: var(--brandsecondary);
}

/*------------------------
admin sidebar
-------------------------*/

.btn-admin-sidebar-version-outline {
    color: var(--white);
    border-color: var(--white);
    background: none;
    border-width: 2px;
    font-weight: 600;
    border-radius: var(--border-radius);
}

.btn-admin-sidebar-version-outline:hover, .btn-admin-sidebar-version-outline:active, .btn-admin-sidebar-version-outline:focus {
    background: var(--brandsecondary) !important;
    border-color: var(--brandsecondary) !important;
    color: var(--white) !important;
}


/*----------------------
    buttons
------------------------*/

.btn-cpbrand,
.btn.btn-cpbrand,
.btn-cpbrand:focus{    
    border-radius: var(--border-radius);
    color: var(--brandprimary) !important;
    border-color: var(--brandprimary);
    background: transparent;
}

.btn-cpbrand:hover{
    color: var(--white) !important;
    background: var(--brandprimary);
}

.btn-cpbrand-red,
.btn-cpbrand-red:focus
.btn.btn-cpbrand-red,
.btn.btn-cpbrand-red:focus{
    border-radius: var(--border-radius) !important;
    color: var(--danger-btn);
    border-color: var(--danger-btn);
    background: transparent;
}

.btn-cpbrand-red:hover{
    color: var(--white) !important;
    background: var(--danger-btn);
}

.btn-cpbrand-inverse,
.btn.btn-cpbrand-inverse,
.btn-cpbrand-inverse:focus{
    color: var(--white) !important;
    border-color: var(--white);
}

.btn-cpbrand-inverse:hover,
.btn.btn-cpbrand-inverse:hover{
    color: var(--text-color) !important;
    background: var(--white);
}

.btn-cp-secondary,
.btn-cp-secondary:focus{
    border-radius: var(--border-radius) !important;
    color: var(--white) !important;
    border-color: var(--brandcolor-1) !important;
    background: var(--brandcolor-1) !important;
    padding: 0.3rem 2.5rem;
    height: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cp-secondary > iconify-icon {
    color: var(--success-btn);
    font-size: 30px;
}

.btn-cancel,
.btn-cancel:focus{
    border-radius: var(--border-radius) !important;
    color: var(--white) !important;
    border-color: #a5a5a5 !important;
    background: #a5a5a5 !important;
    padding: 0.7rem 3rem !important;
    height: auto !important
}

.btn-cp-sidebar-version,
.btn.btn-cp-sidebar-version{
    background: var(--versionprimary);
    border-color: var(--versionprimary);
    color: var(--white);
    font-size: 13px;
    padding: 6px 34px;
    border-radius: var(--border-radius);
    font-weight: normal;
}

.btn-cp-sidebar-version:hover,
.btn-cp-sidebar-version:active,
.btn-cp-sidebar-version:focus,
.btn-cp-sidebar-version.gadmin-dashboard-version:focus{
    background: var(--buttonhover-1) !important;
    border-color: var(--buttonhover-1) !important;
    color: var(--white) !important;
}

.btn-cp-sidebar-version-outline,
.btn.btn-cp-sidebar-version-outline{
    color: var(--versionprimary);
    border-color: var(--versionprimary);
    background: none;
    border-width: 2px;
    font-weight: 600;
    border-radius: var(--border-radius);
}

.btn-cp-sidebar-version-outline:hover,
.btn-cp-sidebar-version-outline:active,
.btn-cp-sidebar-version-outline:focus{
    background: var(--versionprimary) !important;
    border-color: var(--versionprimary) !important;
    color: var(--white) !important;
}

.btn-cp-sidebar-version-outline-2,
.btn.btn-cp-sidebar-version-outline-2{
    color: var(--brandprimary);
    border-color: var(--brandprimary);
    background: none;
    border-width: 2px;
    font-weight: 600;
    border-radius: 12px;
}

.btn-cp-sidebar-version-outline-2:hover,
.btn-cp-sidebar-version-outline-2:active,
.btn-cp-sidebar-version-outline-2:focus{
    background: var(--brandprimary) !important;
    border-color: var(--brandprimary) !important;
    color: var(--white) !important;
}

.btn.btn-cp-header-book,
.btn-cp-header-book{
    background: var(--brandsecondary);
    font-size: 12px;
    padding: 11px 40px !important;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    border: 2px solid var(--brandsecondary);
}

.btn-cp-header-book:hover,
.btn-cp-header-book:active,
.btn-cp-secondary:hover{
    background: var(--buttonhover-2) !important;
    border-color: var(--buttonhover-2) !important;
    color: var(--white) !important;
    opacity: 1;
}

.btn-cp-secondary:hover > iconify-icon {
    color: var(--white);
}


/*-----------end-------------*/

/*------------------------
    datatable btn
-------------------------*/
.dataTable-btn:hover,
.dataTable-btn:focus {
    color: var(--white);
    background-color: var(--text-color);
}

.dataTable-danger-btn {
    color: var(--danger-btn) !important;
    border: 2px solid var(--danger-btn);
}

.dataTable-danger-btn:hover,
.dataTable-danger-btn:focus,
.btn.dataTable-danger-btn:focus {
    color: var(--white) !important;
    background-color: var(--danger-btn);
}

.dataTable-warning-btn {
    color: var(--warning-btn);
    border: 2px solid var(--warning-btn);
}

.dataTable-warning-btn:hover {
    color: var(--white) !important;
    background-color: var(--warning-btn);
}

.dataTable-purple-btn {
    color: var(--purple) !important;
    border: 2px solid var(--purple);
}

.dataTable-purple-btn:hover {
    color: var(--white) !important;
    background-color: var(--purple);
}

.dataTable-success-btn {
    color: var(--success-btn);
    border: 2px solid var(--success-btn);
}

.dataTable-success-btn:hover {
    color: var(--white) !important;
    background-color: var(--success-btn);
}

.dataTable-info-btn {
    color: var(--info-btn);
    border: 2px solid var(--info-btn);
}

.dataTable-info-btn:hover,
.dataTable-info-btn:focus {
    color: var(--white) !important;
    background-color: var(--info-btn);
}

.dataTable-default-btn {
    color: var(--text-color);
    border: 2px solid var(--text-color);
}

.dataTable-default-btn:hover {
    color: var(--white) !important;
    background-color: var(--text-color);
}


/*------------------------
    padding defaults
-------------------------*/
.btn-xxxl{
    padding: .7rem 3rem;
    font-size: 0.875rem;
}

.btn-xxl{
    padding: .7rem 2rem;
    font-size: 0.875rem;
}

.btn-xl{
    padding: .625rem 1.5rem;
    font-size: 0.875rem;
}

.btn-lg{
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-md{
    padding: 0.45rem 0.85rem;
    font-size: 0.7677rem;
}

.btn-sm{
    padding: 0.3125rem 0.625rem;
    font-size: 0.73rem;
    line-height: 1.4;
}

.btn-xs{
    font-size: 0.7rem;
    padding: 0.1125rem 0.35rem;
}

.btn-xxs{
    padding: 0.1125rem 0.35rem;
    font-size: 0.6875rem;
}