.buskool-button {
    display: flex;
    height: 40px;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border: none;
    outline: none;
    border-radius: 8px;
    user-select: none;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.25px;
    transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
    background: transparent;
}

.buskool-button * {
    pointer-events: none;
}

.buskool-button.loading-state {
    pointer-events: none;
}

.buskool-button.has-right-icon {
    padding-right: 16px;
}

.buskool-button.has-left-icon {
    padding-left: 16px;
}

.buskool-button-icon {
    width: 24px;
    height: 24px;
}

.buskool-button .loader {
    width: 20px;
    height: 20px;
}

.filled-button {
    background: #FF9828;
    color: #FFF;             
}

.filled-button:hover {
    background: #FF8603;
}

.filled-button.disable {
    color: #98979A;
    background: #E3E3E4;
    pointer-events: none;
}

.filled-blue-button {
    background: #3B94D0;
    color: #FFF;             
}

.filled-blue-button:hover {
    background: #3188c3;
}

.filled-blue-button.disable {
    color: #98979A;
    background: #E3E3E4;
    pointer-events: none;
}

.filled-red-button {
    background: #F03738;
    color: #FFF;             
}

.filled-red-button:hover {
    background: #d12929;
}

.filled-red-button.disable {
    color: #98979A;
    background: #E3E3E4;
    pointer-events: none;
}

.color-outline {
    color: #FF8603;
    border: 1px solid #FF8603;
}

.color-outline:hover {
    background: rgba(252, 226, 192, 0.50);
}

.color-outline.disable {
    color: #98979A;
    border: 1px solid #E3E3E4; 
    pointer-events: none;
}

.black-outline {
    color: #030303;
    border: 1px solid #757575;
}

.black-outline:hover {
    border: 1px solid #757575;
    background: #F2F3F7;
}

.black-outline.disable {
    color: #98979A;
    border: 1px solid #E3E3E4;  
    pointer-events: none;
}

.black-outline .loader {
    border-top: 2px solid #757575;
    border-bottom: 2px solid #757575;
    border-right: 2px solid #757575;
}

.blue-outline {
    color: #3B94D0;
    border: 1px solid #3B94D0;
}

.blue-outline:hover {
    border: 1px solid #3B94D0;
    background: #F2F3F7;
}

.blue-outline.disable {
    color: #98979A;
    border: 1px solid #E3E3E4;  
    pointer-events: none;
}

.blue-outline .loader {
    border-top: 2px solid var(--blue-admin);
    border-bottom: 2px solid var(--blue-admin);
    border-right: 2px solid var(--blue-admin);
}

.green-outline {
    color: #00AC5C;
    border: 1px solid #00AC5C;
}

.green-outline:hover {
    border: 1px solid #00AC5C;
    background: #F2F3F7;
}

.green-outline.disable {
    color: #98979A;
    border: 1px solid #E3E3E4;  
    pointer-events: none;
}

.green-outline .loader {
    border-top: 2px solid #00AC5C;
    border-bottom: 2px solid #00AC5C;
    border-right: 2px solid #00AC5C;
}

.red-outline {
    color: #ED1516;
    border: 1px solid #F03738;
}

.red-outline:hover {
    border: 1px solid #F03738;
    background: #F2F3F7;
}

.red-outline.disable {
    color: #98979A;
    border: 1px solid #E3E3E4;  
    pointer-events: none;
}

.red-outline .loader {
    border-top: 2px solid #F03738;
    border-bottom: 2px solid #F03738;
    border-right: 2px solid #F03738;
}

.color-text {
    padding: 0 16px;
    color: #FF8603;
    border: none;
}
.p-l-r-8{
    padding-left: 8px;
    padding-right: 8px;
}
.color-text:hover {
    border: none;
    background: rgba(252, 226, 192, 0.50);
}

.color-text.disable {
    color: #98979A;
    border: none;  
    pointer-events: none;
}

.black-text {
    padding: 0 16px;
    color: #030303;
    border: none;
}

.black-text:hover {
    border: none;
    background: #F2F3F7;
}

.black-text.disable {
    color: #98979A;
    border: none;
    pointer-events: none;
}

.blue-text {
    padding: 0 16px;
    color: #3B94D0;
    border: none;
}

.blue-text:hover {
    border: none;
    background: #F2F3F7;
}

.blue-text.disable {
    color: #98979A;
    border: none;
    pointer-events: none;
} 

.red-text {
    padding: 0 16px;
    color: #ED1516;
    border: none;
}

.red-text:hover,
.green-text:hover,
.orange-text:hover {
    border: none;
    background: #F2F3F7;
}

.red-text.disable {
    color: #98979A;
    border: none;
    pointer-events: none;
} 

.size-1 {
    border-radius: 100px;
    height: 48px;
    padding: 0px 48px;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    gap: 8px;
}

.size-2 {
    border-radius: 100px;
    height: 40px;
    padding: 0px 24px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: 0.1px; 
}

/* .size-1:hover,
.size-2:hover {
    border: 1px solid #FFF;
    background: transparent;
} */

.filled-button svg path{
    fill: #FFFFFF;
}

.color-outline svg path,
.color-text svg path {
    fill: #FF8603;   
}

.black-outline svg path,
.black-text svg path {
    fill: #030303;
}

.filled-button.disable svg path,
.color-outline.disable svg path,
.black-outline.disable svg path,
.color-text.disable svg path,
.black-text.disable svg path{
    fill: #98979A;
}

.loader {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    -webkit-animation: spin 1.3s linear infinite; /* Safari */
    animation: spin 1.3s linear infinite;
}

.filled-button .loader {
    border: 2px solid #FF9828;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    border-right: 2px solid #FFF;
}

.color-outline .loader {
    border: 2px solid #FFF;
    border-top: 2px solid #FF8603;
    border-bottom: 2px solid #FF8603;
    border-right: 2px solid #FF8603;
}

@media (max-width: 768px) {
.buskool-button {
    height: 40px;
    font-size: 12px;
}

.size-2 {
    padding: 0 16px;
}
}