.btn {
    display: inline-flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;

    height: 56px;
    border-radius: 12px;
    border: none;

    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;

    width: 100%;
}

@media screen and (min-width: 768px) {
    .btn {
        width: auto;
    }
}

.btn.btn-sm {
    height: 40px;

    padding: 8px 24px 8px 24px;
    border-radius: 8px;

    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0em;
}

.btn.btn-sm-12 {
    height: 40px;

    padding: 8px 24px 8px 24px;
    border-radius: 8px;

    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0em;
}

.btn img {
    margin-right: 10px;
}

.btn svg {
    width: 24px;
    height: 24px;
}

.btn.btn-primary {
    background-color: var(--main-btn-color);
    border-color: var(--main-btn-color);
    color: #FFF;
}

.btn.btn-primary--bhu {
    background-color: var(--main-btn-color--bhu);
    border-color: var(--main-btn-color--bhu);
}

.btn.btn-primary svg {
    padding: 3px;
}

.btn.btn-secondary svg path {
    fill: var(--main-btn-color);
}

.btn.btn-success {
    background-color: #4CA853;
    color: white;
    border: 3px solid #4CA853;
}

.btn.btn-success:hover {
    background-color: white;
    color: #4CA853;
}

.btn.btn-success svg path {
    fill: white;
}

.btn.btn-success:hover svg path {
    fill: #4CA853;
}

.btn.btn-delete {
    background-color: var(--color-error);
    color: white;
    border: 3px solid var(--color-error);
}

.btn.btn-delete:hover {
    background-color: white;
    color: var(--color-error);
}

.btn.btn-delete svg path {
    fill: white;
}

.btn.btn-delete:hover svg path {
    fill: var(--color-error);
}

.btn.square-btn-delete {
    background-color: var(--color-error);
    color: white;
    display: inline-flex;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 3px solid var(--color-error);
    width: 48px;
    height: 48px;
}

.btn.square-btn-delete.btn-sm {
    background-color: var(--color-error);
    color: white;
    border: 2px solid var(--color-error);
}

.btn.square-btn-delete.btn-sm-12 {
    border: 2px solid var(--color-error);
}

.btn.square-btn-delete:hover {
    background-color: white;
    color: var(--color-error);
}

.btn.square-btn-delete svg path {
    fill: white;
}

.btn.square-btn-delete:hover svg path {
    fill: var(--color-error);
}

.btn.btn-success.multicolor svg path:nth-child(2) {
    fill: #4CA853;
}

.btn.btn-success.multicolor:hover svg path:nth-child(2) {
    fill: #FFF;
}

.btn.btn-primary.multicolor svg path:nth-child(2) {
    fill: var(--main-btn-color);
}

.btn.btn-secondary.multicolor svg path:nth-child(2) {
    fill: #FFF;
}

.btn.btn-secondary.multicolor:hover svg path:nth-child(2) {
    fill: #fdece5;
}

.btn.btn-primary svg path {
    fill: #FFF;
}


.btn.btn-primary:hover {
    background-color: var(--main-btn-color);
    border-color: var(--main-btn-color);
    box-shadow: 0px 8px 16px 0px rgb(from var(--main-btn-color) r g b / 0.4);
}

.btn.btn-primary--bhu:hover {
    background-color: var(--main-btn-color--bhu);
    border-color: var(--main-btn-color--bhu);
    box-shadow: 0px 8px 16px 0px rgba(38, 90, 136, 1);
}

.btn.btn-primary:active,
.btn.btn-primary:focus {
    background-color: var(--main-btn-color);
    border-color: var(--main-btn-color);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2) inset;
}

.btn.btn-primary--bhu:active,
.btn.btn-primary--bhu:focus {
    background-color: var(--main-btn-color--bhu);
    border-color: var(--main-btn-color--bhu);
}

.btn.btn-primary:disabled {
    background: #DFDFDF;
    color: #B7B7B7;
}

.btn.btn-secondary {
    border: 3px solid var(--main-btn-color);
    background-color: var(--secondary-btn-color);
    color: var(--main-btn-color);
}

.btn.btn-secondary--bhu {
    border: 3px solid var(--main-btn-color--bhu);
    color: var(--main-btn-color--bhu);
}


.btn.btn-secondary.btn-sm {
    border: 2px solid var(--main-btn-color);
}

.btn.btn-secondary--bhu.btn-sm {
    border-color: var(--main-btn-color--bhu);
}

.btn.btn-secondary.btn-sm-12 {
    border: 2px solid var(--main-btn-color);
}

.btn.btn-secondary--bhu.btn-sm-12 {
    border-color: var(--main-btn-color--bhu);
}

.btn.btn-secondary:hover {
    border-color: var(--main-btn-color);
    background-color: rgb(from var(--main-btn-color) r g b / 0.1);
    color: var(--main-btn-color);
}

.btn.btn-secondary--bhu:hover {
    border-color: var(--main-btn-color--bhu);
    background-color: #0348551A;
    color: var(--main-btn-color--bhu);
}

.btn.btn-secondary:active,
.btn.btn-secondary:focus {
    border-color: var(--main-btn-color);
    background-color: var(--secondary-btn-color);
    color: var(--main-btn-color);
}

.btn.btn-secondary--bhu:active,
.btn.btn-secondary--bhu:focus {
    border-color: var(--main-btn-color--bhu);
    color: var(--main-btn-color--bhu);
}

.btn.btn-secondary:disabled {
    border-color: #DFDFDF;
    color: #DFDFDF;
}

.btn:disabled svg path {
    fill: #B7B7B7;
}

.btn.square-btn-secondary {
    display: inline-flex;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 3px solid var(--color-primary-3);
    background: transparent;
    width: 48px;
    height: 48px;
}

.btn.square-btn-secondary.btn-sm {
    border: 2px solid var(--main-btn-color);
}

.btn.square-btn-secondary.btn-sm-12 {
    border: 2px solid var(--main-btn-color);
}

.btn.square-btn-secondary:hover {
    border-color: var(--main-btn-color);
    background-color: rgb(from var(--color-primary-3) r g b / 0.1);
    color: var(--main-btn-color);
}

.btn.square-btn-secondary:active,
.btn.square-btn-secondary:focus {
    border-color: var(--main-btn-color);
    background-color: var(--secondary-btn-color);
    color: var(--main-btn-color);
}

.btn.square-btn-secondary:disabled {
    border-color: #DFDFDF;
    color: #DFDFDF;
}


.btn.square-btn-secondary svg path {
    fill: var(--main-btn-color);
}

.btn.square-btn-secondary--transparent {
    display: inline-flex;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 3px solid var(--main-btn-color);
    background: #FFF;
    width: 48px;
    height: 48px;
}

.btn.square-btn-secondary--transparent.btn-sm {
    border: 2px solid var(--main-btn-color);
}

.btn.square-btn-secondary--transparent.btn-sm-12 {
    border: 2px solid var(--main-btn-color);
}

.btn.square-btn-secondary--transparent:hover {
    border-color: var(--main-btn-color);
    background-color: rgb(from var(--color-primary-3) r g b / 0.1);
    color: var(--main-btn-color);
}

.btn.square-btn-secondary--transparent:active,
.btn.square-btn-secondary--transparent:focus {
    border-color: var(--main-btn-color);
    background-color: var(--secondary-btn-color);
    color: var(--main-btn-color);
}

.btn.square-btn-secondary--transparent:disabled {
    border-color: #DFDFDF;
    color: #DFDFDF;
}


.btn.square-btn-secondary--transparent svg path {
    fill: var(--main-btn-color);
}

.btn.btn-square {
    width: 48px;
    height: 48px;
}