.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: var(--font-size);
    padding: 8px 20px 8px 20px;
    border-radius: var(--radius-base);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    line-height: 1;
}

.btn i {
    margin-right: 6px;
    font-size: 18px;
    transition: var(--time-01);
}

/* Bug on "btn btn-toggle-collapse" alignment */
/* .btn:not(.btn-inline) i {
    margin-left: -4px;
} */

.btn.has-icon-right i {
    margin-left: 6px;
    margin-right: -4px;
}

.dropdown-toggle.btn[disabled],
.dropdown-toggle.btn:disabled,
.dropdown-toggle.btn.disabled {
    /* color: var(--grey-03) !important;  I will remove this property to keep colors in modifiers */
    pointer-events: auto !important;
}

.btn[disabled],
.btn:disabled,
.btn.disabled {
    /* color: var(--grey-03) !important;  I will remove this property to keep colors in modifiers */
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.btn:focus,
.btn:active,
.btn:focus-visible {
    box-shadow: none !important;
}

.btn:not(:disabled):not(.disabled):active {
    border: 1px solid transparent !important;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    outline: none !important;
}

/* -------------- Link -------------- */
a {
    color: var(--btn-link-color);
    text-decoration: none;
}

a:hover {
    color: var(--btn-link-color-hover);
}

a[disabled],
a:disabled,
a.disabled {
    pointer-events: none !important;
    opacity: 0.6 !important;
}

a:focus-visible,
input[type='button']:focus-visible,
input[type='submit']:focus-visible,
button:focus-visible {
    border: 1px solid var(--primary-light) !important;
}

/* -------------- Primary -------------- */

.btn.btn-primary {
    color: var(--btn-primary-text-color);
    background-color: var(--btn-primary-background-color);
    border-color: transparent;
}

.btn.btn-primary:hover {
    color: var(--btn-primary-text-color-hover);
    background-color: var(--btn-primary-background-color-hover);
    transition: 0.3s;
}

.btn.btn-primary:focus,
.btn.btn-primary:active {
    box-shadow: none !important;
}

.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    color: var(--btn-primary-text-color-active) !important;
    background-color: var(--btn-primary-background-color-active) !important;
    box-shadow: none !important;
}

/* Keyboard nav highlight same text color to contrast */
.btn.btn-primary:focus-visible {
    border: 1px solid var(--btn-primary-text-color) !important;
}

/* -------------- Primary Light -------------- */

.btn.btn-primary-light {
    color: var(--secondary);
    background-color: var(--primary-light);
    border-color: transparent;
}

.btn.btn-primary-light:hover {
    background-color: var(--primary-dark);
    transition: 0.3s;
}

.btn.btn-primary-light:focus,
.btn.btn-primary-light:active,
.btn.btn-primary-light:focus-visible,
.btn.btn-primary-light:not(:disabled):not(.disabled):active {
    background-color: var(--primary-transparent) !important;
    color: var(--secondary) !important;
    box-shadow: none !important;
}

/* -------------- Secondary -------------- */

.btn.btn-secondary {
    color: var(--btn-secondary-text-color);
    background-color: var(--btn-secondary-background-color);
    border-color: transparent;
}

input.btn.btn-secondary::placeholder {
    color: var(--btn-secondary-text-color);
}

.btn.btn-secondary:hover {
    color: var(--btn-secondary-text-color-hover);
    background-color: var(--btn-secondary-background-color-hover) !important;
    transition: 0.3s;
}

.btn.btn-secondary:focus,
.btn.btn-secondary:focus-visible {
    box-shadow: none !important;
}

.btn.btn-secondary:active,
.btn.btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--btn-secondary-text-color-active) !important;
    background-color: var(--btn-secondary-background-color-active) !important;
    box-shadow: none !important;
}

.btn.btn-secondary.focus:focus {
    background-color: var(--white-01) !important;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1) !important;
}

/* -------------- Tertiary -------------- */

.btn.btn-tertiary {
    color: var(--btn-tertiary-text-color);
    background-color: var(--btn-tertiary-background-color);
    border-color: transparent;
    transition: 0.3s;
}

.btn.btn-tertiary:hover {
    color: var(--btn-tertiary-text-color-hover);
    background-color: var(--btn-tertiary-background-color-hover);
    transition: 0.3s;
}

.btn.btn-tertiary:focus,
.btn.btn-tertiary:focus-visible {
    box-shadow: none !important;
}

.btn.btn-tertiary:active,
.btn.btn-tertiary:not(:disabled):not(.disabled):active {
    color: var(--btn-tertiary-text-color-active) !important;
    background-color: var(--btn-tertiary-background-color-active) !important;
    box-shadow: none !important;
}

.btn.btn-tertiary[disabled] {
    color: var(--primary-lighter) !important;
    opacity: 0.65;
}

.dropdown-menu.menu-float .btn-tertiary.disabled,
.dropdown-menu.menu-float .btn-tertiary:disabled {
    color: var(--primary-lighter);
    background-color: var(--tertiary-light);
}

/* -------------- Light -------------- */

.btn.btn-light {
    color: var(--btn-light-text-color);
    background-color: var(--btn-light-background-color);
    border-color: transparent;
}

.btn.btn-light:hover {
    color: var(--btn-light-text-color-hover);
    background-color: var(--btn-light-background-color-hover);
    transition: 0.4s;
}

.btn.btn-light:focus,
.btn.btn-light:focus-visible {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1) !important;
}

.btn.btn-light:active,
.btn.btn-light:not(:disabled):not(.disabled):active {
    color: var(--btn-light-text-color-active) !important;
    background-color: var(--btn-light-background-color-active) !important;
    box-shadow: none !important;
}

.btn.btn-light:hover i[class*='delete'],
.btn.btn-light.btn-icon i[class*='delete']:hover,
.btn.btn-light.btn-icon i[class*='close']:hover {
    color: var(--red-04);
}

.btn.btn-light.btn-icon.delete:hover {
    color: var(--red-04);
}

/* -------------- Success -------------- */

.btn.btn-success {
    background-color: var(--green-05);
    color: var(--white-01);
}
.btn.btn-success:hover {
    background-color: var(--green-04);
}

/* -------------- Danger -------------- */

.btn.btn-danger {
    color: var(--white-01);
    background-color: var(--red-03);
    border-color: var(--red-03);
}

.btn-danger:hover {
    color: var(--white-01);
    background-color: var(--red-04);
    border-color: var(--red-04);
}

/* -------------- Sizes -------------- */

.btn.btn-sm {
    height: 32px;
    padding: 12px 16px 10px 16px;
    line-height: 1;
}

.btn.btn-badge {
    font-size: 14px !important;
    padding: 5px 10px;
    height: 28px;
    border-radius: 0.25rem;
}

.btn.btn-lg {
    height: 62px;
    line-height: 1.2;
}
@media (max-width: 576px) {
    .btn.btn-lg {
        height: 40px;
    }
}

.btn.btn-auto {
    height: auto !important;
}

.btn.btn-inline-lg {
    height: 40px !important;
    font-size: 14px !important;
}

.btn.btn-inline-lg i {
    font-size: 26px !important;
}

.btn.btn-sm i {
    margin-right: 4px;
    font-size: 16px;
}

.btn.btn-icon.btn-sm i {
    font-size: 22px; /* Verificar */
}

.btn.btn-inline.btn-sm i {
    font-size: 14px;
}

input.btn.btn-sm {
    padding: 10px 16px 10px 16px;
}

.btn.btn-full {
    width: 100%;
}
/* -------------- Square -------------- */

.btn-square {
    height: 40px;
    width: 40px;
    padding: initial;
}

.btn-square.btn-xsm {
    height: 24px;
    width: 24px;
    padding: initial;
}

.btn-square.btn-sm {
    height: 32px;
    width: 32px;
    padding: initial;
}

/* -------------- Rounded -------------- */

.btn.btn-rounded {
    border-radius: 100%;
    width: 40px;
    height: 40px;
    transition: 0.3s;
    box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
}

.btn-rounded.btn-sm {
    width: 32px;
    height: 32px;
    padding: 0;
}

.btn.btn-rounded.btn-icon.dropdown-toggle {
    box-shadow: var(--box-shadow);
}

.btn.btn-primary.btn-rounded:hover {
    background-color: var(--primary-dark);
}
/* -------------- Inline -------------- */

.btn.btn-inline {
    padding: 0;
    height: initial;
    border: 1px solid transparent;
    background-color: transparent;
    min-width: 40px;
    box-shadow: none;
    color: var(--btn-inline-color);
}

.btn.btn-inline:hover {
    color: var(--btn-inline-color-hover);
    transition: 0.3s;
}

.btn.btn-inline.btn-primary {
    color: var(--primary);
}
.btn.btn-inline.btn-secondary {
    color: var(--secondary);
}
.btn.btn-inline.btn-light {
    color: var(--grey-02);
}
.btn.btn-inline.btn-danger {
    color: var(--red-04);
}
.btn.btn-inline.btn-success {
    color: var(--success);
}
.btn.btn-inline.btn-info {
    color: var(--blue-04);
}
.btn.btn-inline.btn-blue {
    color: var(--blue-05);
}

.btn.btn-inline.btn-primary:hover {
    color: var(--primary);
}
.btn.btn-inline.btn-secondary:hover {
    color: var(--secondary);
}
.btn.btn-inline.btn-light:hover {
    color: var(--grey-03);
}
.btn.btn-inline.btn-delete:hover {
    color: var(--red-04);
}

.btn.btn-inline.btn-success:hover,
.btn.btn-inline.btn-success:active,
.btn.btn-inline.btn-success:focus-visible {
    background-color: transparent;
    color: var(--green-04) !important;
}

.btn.btn-inline.btn-danger:hover,
.btn.btn-inline.btn-danger:active,
.btn.btn-inline.btn-danger:focus-visible {
    background-color: transparent;
    color: var(--red-05) !important;
}

.btn.btn-inline.btn-info:hover,
.btn.btn-inline.btn-info:active,
.btn.btn-inline.btn-info:focus-visible {
    background-color: transparent;
    color: var(--blue-05) !important;
}

.btn.btn-inline.btn-blue:hover,
.btn.btn-inline.btn-blue:active,
.btn.btn-inline.btn-blue:focus-visible {
    background-color: transparent;
    color: var(--tertiary);
}

.btn.btn-inline:focus,
.btn.btn-inline:focus-visible {
    box-shadow: none;
}

.btn.btn-inline:active,
.btn.btn-inline:not(:disabled):not(.disabled):active {
    box-shadow: none;
    color: var(--tertiary);
}

.btn.btn-inline.btn-icon i[class*='delete']:hover,
.btn.btn-inline.btn-icon:not(.btn-tertiary) i[class*='close']:hover {
    color: var(--red-04);
}

.btn.btn-inline.btn-icon.delete:hover {
    color: var(--red-04);
}

.btn.btn-inline i {
    transform: translate(0px, -1px);
    font-size: 16px;
    margin-left: 0;
}

.btn.btn-inline.btn-light:focus,
.btn.btn-inline.btn-light:focus-visible {
    box-shadow: none !important;
}

.btn.btn-inline.btn-light:hover {
    background-color: transparent !important;
}

.btn.btn-inline.btn-end {
    justify-content: flex-end;
    padding-right: 12px;
}

/* Verificar */
/* .btn.btn-inline > a i { color: var(--primary); }

.btn.btn-inline:hover, .btn.btn-inline:hover a > i {
    color: var(--secondary-dark);
}

.btn.btn-inline > a { margin-right: 10px; } */

/* -------------- Inline Light -------------- */

.btn.btn-inline-light {
    padding: 0;
    height: initial;
    border: none;
    background-color: transparent;
    min-width: 40px;
    box-shadow: none;
    color: var(--white-01);
}

/* -------------- Transparent -------------- */

.btn.btn-transparent {
    background-color: transparent;
    box-shadow: none;
}

.btn.btn-transparent:hover,
.btn.btn-transparent:active,
.btn.btn-transparent:focus {
    background-color: initial;
}

/* Combo */

.btn.btn-combo {
    display: block;
    color: var(--grey-04);
    width: 100%;
    max-width: 290px;
    font-weight: 500;
    height: initial;
    border-color: transparent;
    padding: 12px 16px;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
}

.btn.btn-combo p {
    margin-left: 22px;
    color: var(--grey-03) !important;
    font-size: 12px !important;
    white-space: normal;
    margin: 0;
}

.btn.btn-combo i {
    margin-right: 6px;
    font-size: 16px;
}

.btn.btn-combo:hover {
    background-color: var(--secondary);
    transition: 0.3s;
    border-color: transparent;
}

.btn.btn-combo:focus {
    background-color: #e9ecef;
    border-color: transparent;
}

/* -------------- Outlined -------------- */

.btn.btn-outline-primary {
    background-color: white;
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: none;
}

.btn.btn-outline-primary:hover {
    color: var(--primary-dark);
    box-shadow: 0px 1px 1px 1px var(--primary-transparent);
    transition: 0.3s;
}

.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:focus-visible,
.btn.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: none;
}

.btn.btn-outline-secondary {
    background-color: transparent;
    border: 1px solid var(--secondary-dark);
    color: var(--secondary-dark);
}

.btn.btn-outline-secondary:hover {
    background-color: transparent;
    box-shadow: 0px 1px 1px 1px var(--primary-transparent);
    transition: 0.3s;
}

.btn.btn-outline-secondary:focus,
.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary:focus-visible,
.btn.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--secondary-light) !important;
    color: var(--primary-dark) !important;
    border: 1px solid var(--primary-dark) !important;
    box-shadow: none;
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--primary) !important;
    color: var(--secondary);
}

.btn-outline-danger:hover {
    color: var(--white-01);
    background-color: var(--red-03);
    border-color: var(--red-03);
}

/* -------------- Icon --------------*/

.btn.btn-icon i {
    font-size: 22px; /* Verificar */
    margin: 0;
}

/* -------------- Close button -------------- */

.btn-close {
    appearance: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 100%;
    border: 1px solid transparent;
    line-height: 1;
    z-index: 2001;
}

.btn-close i {
    font-size: 20px;
    margin-right: 0;
}

.btn-close,
.wdk-subsidebar-close {
    color: var(--btn-close-color);
}

.btn-close:hover i,
.wdk-subsidebar-close:hover i {
    color: var(--btn-close-color-hover);
    transition: 0.3s;
}

.btn-close:focus,
.btn-close:active,
.btn-close:not(:disabled):not(.disabled):active {
    background-color: transparent !important;
    color: var(--tertiary-dark) !important;
    box-shadow: none;
}

.btn-close:focus-visible {
    color: var(--tertiary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.alert-dismissible .btn-close {
    padding: 0 !important;
}

button.button-input-cleaner {
    height: initial;
    top: initial;
    bottom: 2px;
    right: 6px;
    background-color: white;
    border-radius: 8px;
}

input:disabled ~ button.button-input-cleaner {
    background-color: var(--grey-01);
}

.btn-close.btn-close-dropmenu {
    width: 22px;
    height: 22px;
    top: 2px;
    right: 2px;
    border-radius: 100%;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-item.disabled.header.v-table {
    padding-right: 28px;
}

.btn-close.btn-close-dropmenu:hover {
    background-color: var(--grey-01);
    transition: 0.3s;
}

.btn-close.btn-close-dropmenu i {
    font-size: 18px;
}

/* -------------- Tootip -------------- */

.btn.btn-icon-tooltip {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: var(--grey-02);
}

.btn.btn-icon-tooltip.bare:not(:focus) {
    box-shadow: none;
    background-color: transparent;
}

.table td .btn.btn-icon-tooltip {
    box-shadow: none;
}

.btn.btn-icon-tooltip.bare:hover i {
    color: var(--secondary-dark);
}

.btn.btn-icon-tooltip:hover:not(.bare) {
    background-color: var(--secondary);
}

.btn.btn-icon-tooltip:hover:not(:focus) .btn-tooltip {
    display: block;
    opacity: 1;
}

.btn.btn-icon-tooltip i {
    color: var(--primary);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn.btn-icon-tooltip .btn-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-dark);
    color: var(--white-01);
    white-space: nowrap;
    z-index: 2008;
    padding: 6px 12px;
    border-radius: 5px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-weight: 200;
    display: none;
    opacity: 0;
    transition: opacity var(--time-01);
}
/* -------------- Icon List Tootip -------------- */

.btn.btn-icon-list-tooltip {
    position: relative;
    width: 32px;
    height: 32px;
    color: var(--white-01);
    z-index: 2008;
    padding: 6px 12px;
    font-size: 24px;
    font-weight: 200;
    box-shadow: none;
}

.table td .btn.btn-icon-tooltip {
    box-shadow: none;
}

.btn.btn-icon-list-tooltip i {
    color: var(--primary);
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
}

/* -------------- Search -------------- */

.btn.btn-search {
    height: 34px;
    box-shadow: none;
    border-radius: 0 8px 8px 0;
    border-color: var(--grey-02);
}

.btn.btn-search i {
    font-size: 1rem;
    margin-right: 0;
}

/* -------------- Mobile -------------- */

/* 1025 Mobile update  */
@media (max-width: 992px) {
    .btn.mobile-bottom-right,
    .btn.mobile-bottom-right:hover {
        position: fixed;
        bottom: 10px;
        right: 10px;
        width: 60px;
        height: 60px;
        box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
        z-index: 2000;
        border-radius: 100%;
        overflow: hidden;
        color: transparent;
        background-color: var(--secondary-dark);
        border-color: var(--secondary-dark);
    }
    .btn.mobile-bottom-right i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--primary);
        font-size: 34px;
    }
}

/* Sidebar Scroll Buttons */
.wdk-btn-scroll {
    position: absolute;
    width: 204px;
    padding: 0;
    padding-top: 4px;
    border: none;
    transition: 0.3s;
    z-index: 1;
}

.wdk-btn-scroll.btn-scroll-sidebar {
    color: var(--sidebar-btn-scroll-text-color);
    background-color: var(--sidebar-btn-scroll-background-color);
}

.wdk-btn-scroll.btn-scroll-sidebar:hover {
    color: var(--sidebar-btn-scroll-text-color-hover);
    background-color: var(--sidebar-btn-scroll-background-color-hover);
    transition: 0.3s;
}

[data-action-scroll='sidebar-top'].wdk-btn-scroll.btn-scroll-sidebar {
    top: 128px;
}

[data-action-scroll='sidebar-bottom'].wdk-btn-scroll.btn-scroll-sidebar {
    bottom: 100px;
}

.wdk-btn-scroll.btn-scroll-subitems {
    color: var(--sidebar-submenu-btn-scroll-text-color);
    background-color: var(--sidebar-submenu-btn-scroll-background-color);
}

.wdk-btn-scroll.btn-scroll-subitems:hover {
    color: var(--sidebar-submenu-btn-scroll-text-color-hover);
    background-color: var(--sidebar-submenu-btn-scroll-background-color-hover);
    background: linear-gradient(
        90deg,
        var(--sidebar-submenu-background-color) 0%,
        var(--sidebar-submenu-btn-scroll-background-color-hover) 50%,
        var(--sidebar-submenu-background-color) 100%
    );
    transition: 0.3s;
}

[data-action-scroll='subitems-top'].wdk-btn-scroll.btn-scroll-subitems {
    top: 46px;
}

[data-action-scroll='subitems-bottom'].wdk-btn-scroll.btn-scroll-subitems {
    bottom: 0;
}

@media (max-width: 576px) {
    .wdk-btn-scroll {
        position: absolute;
    }
}

@media (min-width: 992px) {
    #sidebar-trigger:checked ~ .wdk-layout .wdk-sidebar .wdk-btn-scroll:not(.btn-scroll-subitems) {
        width: 48px;
    }
}

.wdk-btn-scroll.btn-scroll-checklist {
    position: absolute;
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    border: 2px solid transparent;
}
.wdk-btn-scroll.btn-scroll-checklist[data-action-scroll='btn-top'] {
    top: 0;
}
.wdk-btn-scroll.btn-scroll-checklist[data-action-scroll='btn-bottom'] {
    bottom: 0;
}

.wdk-btn-scroll.btn-scroll-checklist[data-action-scroll='btn-top']:hover {
    color: var(--tertiary);
    border-top: 2px solid var(--grey-01);
}

.wdk-btn-scroll.btn-scroll-checklist[data-action-scroll='btn-bottom']:hover {
    color: var(--tertiary);
    border-bottom: 2px solid var(--grey-01);
}

/* _________________ Others _________________ */

.btn.btn-custom {
    width: 80%;
}

.wdk-table-hidden-actions {
    position: relative;
}

.wdk-actions-container > .btn {
    padding: 4px 0;
}

.wdk-actions-container {
    display: none;
    position: absolute;
    bottom: 0;
    right: -500px;
    opacity: 0;
    transition: var(--time-01);
    background-color: var(--white-01);
    padding: 8px 16px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius);
    z-index: 2000;
    transition-delay: 0.25s;
}

.wdk-actions-container > .btn.btn-inline a:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.btn-icon-tooltip:focus + .wdk-actions-container {
    display: block;
    opacity: 1;
    right: 50px;
    transition-delay: 0s;
}

/* Button more table */
.table tbody .btn.btn-inline.btn-icon.dropdown-toggle {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    min-width: 36px;
    padding-top: 3px;
}

.table tbody .btn.btn-inline.btn-icon.dropdown-toggle:hover {
    background-color: var(--primary-transparent) !important;
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.show > .btn-outline-secondary.dropdown-toggle {
    color: var(--secondary);
    background-color: var(--primary);
    border-color: transparent;
}

.btn-check:active + .btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:checked + .btn-radio:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-outline-primary:active:focus {
    box-shadow: none;
}

.btn-wdk-learning-sidebar {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    width: 44px;
    height: var(--form-component-height);
    padding-top: 2px;
    color: var(--training-exec-header-btn-hamburger-text-color);
    background-color: var(--training-exec-header-btn-hamburger-background-color);
    border-radius: var(--radius);
    cursor: pointer;
}

.btn-wdk-learning-sidebar:hover {
    color: var(--training-exec-header-btn-hamburger-text-color-hover);
    background-color: var(--training-exec-header-btn-hamburger-background-color-hover);
}

.wdk-learning-header .btn.btn-wdk-learning-sidebar:focus,
.wdk-learning-header .btn.btn-wdk-learning-sidebar:active {
    color: var(--training-exec-header-btn-hamburger-text-color-active);
    background-color: var(--training-exec-header-btn-hamburger-background-color-active);
}

@media (max-width: 576px) {
    .btn-wdk-learning-sidebar {
        width: 40px;
        margin: 4px !important;
    }
}

/*-----------------------------------------------
--------------------- Old Styles ---------------------
-------------------------------------------------*/

/* .btn-default:hover { background-color: var(--secondary) !important; } */

.btn.btn-toggle-questionnarie {
    justify-content: start;
    background-color: transparent;
    box-shadow: none;
    padding: 8px 20px 8px 24px;
}

label.btn.btn-toggle-questionnarie:active {
    justify-content: start !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.btn-toggle-questionnarie .form-check-input[type='radio'] {
    position: absolute;
    left: 0px;
}

.btn-survey-red {
    background-color: var(--red-02) !important;
    border-color: var(--white-01) !important;
    color: var(--white-01) !important;
}

.btn-survey-yel {
    background-color: var(--yellow-02) !important;
    border-color: var(--white-01) !important;
    color: var(--white-01) !important;
}

.btn-survey-gre {
    background-color: var(--green-survey) !important;
    border-color: var(--white-01) !important;
    color: var(--white-01) !important;
}

.btn-survey-yel:hover {
    background-color: var(--yellow-03) !important;
    border-color: var(--white-01) !important;
    color: var(--white-01) !important;
}

.btn-group > .btn[class^='btn-survey']:nth-child(2) {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.group-top-overlay {
    display: flex;
    position: absolute;
    top: 28px;
    left: 24px;
}

@media (max-width: 576px) {
    .group-top-overlay {
        position: static;
        margin-bottom: 16px;
        margin-top: 16px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .btn.btn-light-mob {
        background-color: var(--white-01);
        color: var(--primary);
        height: 36px;
        padding: 8px 20px 8px 20px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
        border-color: transparent;
        transition: 0.3s;
    }

    .btn.btn-light-mob:focus,
    .btn.btn-light-mob:focus-visible {
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1) !important;
    }

    .btn.btn-light-mob:active,
    .btn.btn-light-mob:not(:disabled):not(.disabled):active {
        background-color: var(--grey-02) !important;
        color: var(--primary-dark) !important;
        box-shadow: none !important;
    }

    .btn.btn-light-mob:hover i[class*='delete'],
    .btn.btn-light-mob.btn-icon i[class*='delete']:hover,
    .btn.btn-light-mob.btn-icon i[class*='close']:hover {
        color: var(--red-04);
    }
}

/*-------------------------------
------------- Fixes -------------
---------------------------------*/

/* Training Buttons */
@media (max-width: 992px) {
    .wdk-layout-survey .btn-group.btn-group-toggle .btn.btn-outline-primary {
        border-radius: 0;
        border-color: var(--grey-02);
    }
    .modal-body .btn-group.btn-group-toggle,
    .wdk-layout-survey .btn-group.btn-group-toggle {
        flex-flow: wrap;
    }
    .wdk-layout-survey .btn-group.btn-group-toggle .btn[class*='btn-survey-'] {
        border-radius: 0;
    }
}

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: none !important;
}

/* Origin bs5fixes */
.btn-outline-primary:not(:disabled):not(.disabled).active {
    border-color: transparent;
}

/* Document find must read button */
.btn-float-mobile {
    position: fixed !important;
    bottom: 12px !important;
    right: 16px !important;
}

.btn-float-mobile i {
    font-size: 26px !important;
}

/*-----------------------------------------------
--------------------- Search ---------------------
-------------------------------------------------*/

.btn.btn-inline.btn-tertiary {
    display: flex;
    align-items: center;
    color: var(--tertiary);
}

.btn.btn-inline.btn-tertiary:hover,
.btn.btn-inline.btn-tertiary:active,
.btn.btn-inline.btn-tertiary:not(:disabled):not(.disabled):active {
    color: var(--tertiary-dark) !important;
    background-color: transparent !important;
}

.btn.btn-inline.btn-tertiary.large {
    font-size: 24px;
}

.btn.btn-featured,
.btn.btn-featured:active,
.btn.btn-featured:not(:disabled):not(.disabled):active {
    padding: 10px 0;
    height: initial;
    border: none !important;
    outline: none !important;
    color: var(--document-find-btn-inline-color);
    background-color: transparent;
    box-shadow: none !important;
}

.btn.btn-featured [class*='icon-'] {
    margin-right: 8px;
}

.btn.btn-featured:hover {
    color: var(--document-find-btn-inline-color-hover);
}

/*-----------------------------------------------
--------------------- Mixes ---------------------
-------------------------------------------------*/

/* btn-inline + btn-rounded */
.btn.btn-inline.btn-rounded {
    width: 40px;
    height: 40px;
}

/* Feed */
.btn-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: var(--font-size);
    padding: 8px 20px 8px 20px;
    border-radius: 100%;
    color: var(--btn-light-text-color);
    background-color: var(--btn-light-background-color);
    border-color: transparent;
    box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
    transition: 0.3s;
    line-height: 1;
}

.btn-preview i {
    font-size: 22px;
    margin: 0;
}

.btn-preview:hover,
.btn-check:checked + .btn-preview {
    color: var(--btn-light-text-color-hover);
    background-color: var(--btn-light-background-color-hover);
    transition: 0.3s;
}

.btn-inline-link.tertiary {
    color: var(--tertiary);
    text-decoration: underline;
    animation: 0.6s cubic-bezier(0.25, 1, 0.3, 1) circle-in-center both;
}

.btn-inline-link.tertiary:hover {
    color: var(--tertiary-dark);
}

/* Button Toast */
.btn.toast-fade:after {
    content: '';
    position: absolute;
    left: -420px;
    top: 0;
    opacity: 0.1;
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 1;
    animation: btnToastFade 6s 1;
}

@keyframes btnToastFade {
    from {
        left: 0;
    }
    to {
        left: -420px;
    }
}

/* Wisa IA */
.btn-wisa-ai-float-wrapper {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
}

.drag-handle {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: -20px;
    width: 20px;
    height: 20px;
    color: var(--tertiary-dark);
    cursor: move;
    transform: translateY(-50%);
    opacity: 0;
    transition: 0.3s;
}

.drag-handle i {
    font-size: 18px !important;
}

.btn-wisa-ai-float-trigger {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(87deg, #90fabd 0%, rgba(138, 128, 255, 1) 100%);
    color: var(--tertiary-dark) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.3s;
}

.btn-wisa-ai-float-trigger i {
    font-size: 22px;
}

.btn-wisa-ai-float-wrapper:hover .btn-wisa-ai-float-trigger {
    color: white !important;
    transition: 0.3s;
}

.btn-wisa-ai-float-trigger::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tertiary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    border-radius: 50%;
}

.btn-wisa-ai-float-wrapper:hover .btn-wisa-ai-float-trigger::before {
    opacity: 1;
}

.btn-wisa-ai-float-trigger > * {
    position: relative;
    z-index: 1;
}

.btn-close-wisa-ai {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -6px;
    right: -12px;
    width: 16px;
    height: 16px;
    color: var(--tertiary-dark);
    border-radius: 50%;
    line-height: 16px;
    text-align: center;
    opacity: 0;
    cursor: pointer;
    transition: 0.3s;
}

.btn-close-wisa-ai i {
    font-size: 18px !important;
}

.btn-wisa-ai-float-wrapper:hover .drag-handle {
    opacity: 1;
    transition: 0.3s;
}

.btn-wisa-ai-float-wrapper:hover .btn-close-wisa-ai {
    opacity: 1;
    transition: 0.3s;
}