/* ------------*/
.btn.btn-gray:not(.no-hover-effect), 
.btn.btn-black:not(.no-hover-effect),
.btn.btn-red:not(.no-hover-effect){ /* .btn-gray */
    position: relative;
    overflow: hidden;
    /*display: inline-table;*/
    
    /*background-color: transparent;
    backface-visibility: hidden;
    box-shadow: inset 0 0 0 1px var(--color-primary);*/

    transform: translateZ(0);
}
.btn.btn-gray:not(.no-hover-effect):after,
.btn.btn-black:not(.no-hover-effect):after,
.btn.btn-red:not(.no-hover-effect):after {
    content: "";
    pointer-events: none;
    position: absolute;

    top: 0;
    left: 0;
    z-index: 1;
    height: 120%;
    width: 120%;

    border-radius: 20%;
    background-color: rgba(0, 0, 0, 0.2);
    scale: 0 0;
    translate: 0 140%;
    transition: scale 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
            translate 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn.btn-gray:not(.no-hover-effect):hover:after,
.btn.btn-black:not(.no-hover-effect):hover:after,
.btn.btn-red:not(.no-hover-effect):hover:after {
    scale: 1.5 1.5;
    translate: 0 0;

    border-radius: 50%;
}
.btn * {
    position: relative;
    z-index: 2;
}
/* ------------*/

.btn.focus, .btn:focus {
    box-shadow: none;
}
.zapask .btn.btn-round {
    width: 44px;
    border-radius: 44px !important;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.zapask .btn.btn-round.btn-sm {
    width: 32px;
}


.zapask .btn-outline-danger {
    border-color: var(--fg-muted);
    color: var(--fg-muted);
}
.zapask .btn-outline-danger:hover {
    background: var(--fg-muted);
    color: #ffffff;
}
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show>.btn-outline-danger.dropdown-toggle {
    background: var(--fg-muted);
    color: #ffffff;
    border-color: var(--fg-muted);
}

.zapask .btn-outline-white {
    background-color: #fff;
    border-color: var(--border-muted);
}
.zapask .btn-outline-white:hover {
    background: var(--bg-surface2);
}
.btn-outline-white:not(:disabled):not(.disabled).active, .btn-outline-white:not(:disabled):not(.disabled):active, .show>.btn-outline-white.dropdown-toggle {
    background: var(--bg-surface2);
}




body .btn {
    height: 44px;
    line-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 18px;
    padding-right: 18px;
    flex: none;
}
body .btn.btn-sm {
    height: 32px;
    line-height: 32px;
    padding-left: 14px;
    padding-right: 14px;
}
.btn.btn-black,
.btn.btn-dark {
    background: var(--neutral-default);
    background-color: var(--neutral-default);
    border-radius: var(--atmr-border-radius-xl);
    color: var(--color-white);
}
.btn.btn-black.disabled,
.btn.btn-dark.disabled,
.btn.btn-black:disabled,
.btn.btn-dark:disabled {
    background: var(--bg-disabled, #2222221A);
    color: var(--fg-disabled, #22222280);
    opacity: unset;
}
.btn.btn-red,
.btn.btn-red:not(:disabled):not(.disabled).active, 
.btn.btn-red:not(:disabled):not(.disabled):active{
    color: var(--color-white);
    background: linear-gradient(153.43deg, #A00000 0%, #C62128 83.33%);
    text-transform: none;
    border-radius: var(--atmr-border-radius-xl);
}
.btn.btn-gray {
    color: var(--fg-default);
    background: var(--neutral-container-default);
    font-family: 'Roboto Flex';
    font-size: 14px;
    font-weight: 600;
    /*line-height: 20px;*/
    text-align: center;
    text-transform: none;
    border-radius: var(--atmr-border-radius-l);
}
.btn.btn-gray:hover {
    background-color: var(--neutral-container-default);
}
.btn.btn-transp {
    background: none;
    border: 1px solid var(--border-muted);
    color: var(--fg-default);
}
.btn.btn-transp:hover {
    background-color: unset;
}
.btn.btn-link,
.btn.btn-link:hover {
    background: none;
    border: none;
    color: var(--neutral-default);
}
.btn.btn-link-blue,
.btn.btn-link-blue:hover {
    background: none;
    border: none;
    color: var(--info-default);
}
.btn.btn-primary,
.btn.btn-primary:hover {
    background: var(--error-default);
    color: var(--color-white);
    text-transform: none;
}
.btn.btn-green {
    color: var(--color-white);
    background: var(--success-default);
    font-family: 'Roboto Flex';
    font-size: 14px;
    font-weight: 600;
    /*line-height: 20px;*/
    text-align: center;
    text-transform: none;
    border-radius: var(--atmr-border-radius-l);
}
.btn.btn-green:hover {
    background-color: var(--success-hover);
}
.btn.btn-pink,
.btn.btn-pink:not(:disabled):not(.disabled).active, 
.btn.btn-pink:not(:disabled):not(.disabled):active{
    color: var(--accent-default);
    background: var(--accent-container-default);
    text-transform: none;
}
.btn.btn-pink:hover {
    background-color: var(--accent-container-hover);
}
.btn.btn-blue,
.btn.btn-blue:not(:disabled):not(.disabled).active, 
.btn.btn-blue:not(:disabled):not(.disabled):active{
    color: var(--color-white);
    background: var(--info-default);
    text-transform: none;
}
.btn.btn-blue:hover {
    background-color: var(--info-hover);
}
.btn.btn-outline-red,
.modal .btn.btn-outline-red {
    color: #dc3545;
    background-color: transparent;
    background-image: none;
    border: 1px solid #dc3545;
}
.btn.btn-outline-black,
.modal .btn.btn-outline-black {
    color: var(--neutral-default);
    background-color: transparent;
    background-image: none;
    border: 1px solid var(--neutral-default);
}
.btn.btn-outline-gray,
.modal .btn.btn-outline-gray {
    color: var(--fg-default);;
    background-color: transparent;
    background-image: none;
    border: 1px solid var(--neutral-container-default);
}
.btn.btn-outline-blue,
.modal .btn.btn-outline-blue {
    color: var(--info-default);
    background-color: transparent;
    background-image: none;
    border: 1px solid var(--info-default);
}
.btn.btn-lightgreen,
.btn.btn-lightgreen:not(:disabled):not(.disabled).active, 
.btn.btn-lightgreen:not(:disabled):not(.disabled):active{
    color: var(--success-on-container);
    background: var(--success-container-default);
    text-transform: none;
}
.btn.btn-lightgreen:hover {
    background-color: var(--success-container-hover);
}

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