/*.btn-primary*/
.btn-primary1 {
    position: relative;
    overflow: hidden;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding: 12px 28px;
    gap: 8px;
    border-radius: 8px;
    font-family: var(--font), sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    background: #0054AA;
    border: 1px solid #0054AA;
    color: #FFFFFF!important;
    white-space: nowrap;
    min-width: max-content;
}
.btn-primary1 .label {
    position: relative;
}

.btn-primary1:before {
    content: '';
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 500ms;
    background-color: #0772DE;
    border-radius: 9999px;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.btn-primary1:disabled {
    border-color: #EBEBEB;
    color: #C0C1C1!important;
}

@media (any-hover: hover) {
    .btn-primary1:hover::before {
        width: 155%;
        height: 19em;
    }
}


/*.btn-primary2*/
.btn-primary2 {
    position: relative;
    overflow: hidden;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding: 12px 28px;
    gap: 8px;
    border-radius: 8px;
    font-family: var(--font), sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    background: #0054AA;
    color: #FFFFFF!important;
    white-space: nowrap;
    min-width: max-content;
}
.btn-primary2 .label {
    position: relative;
}

.btn-primary2:before {
    content: '';
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 500ms;
    background-color: #b3d9ff;
    border-radius: 9999px;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.btn-primary2:disabled {
    color: #C0C1C1!important;
}

@media (any-hover: hover) {
    .btn-primary2:hover {
        color: #0054AA!important;
    }
    .btn-primary2:hover::before {
        width: 155%;
        height: 19em;
    }
}



/*.btn-secondary*/
.btn-secondary {
    position: relative;
    overflow: hidden;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding: 12px 28px;
    gap: 8px;
    border-radius: 8px;
    font-family: var(--font), sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    background: #F2F9FF;
    border: 1px solid #F2F9FF;
    color: #0054AA!important;
    white-space: nowrap;
    min-width: max-content;
}
.btn-secondary .label {
    position: relative;
}

.btn-secondary:before {
    content: '';
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 500ms;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 9999px;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.btn-secondary:disabled {
    color: #C0C1C1!important;
}

@media (any-hover: hover) {
    .btn-secondary:hover {
        border-color: rgba(197, 236, 255, 1);
    }

    .btn-secondary:hover::before {
        width: 155%;
        height: 19em;
    }
}



/*.btn-secondary2*/
.btn-secondary2 {
    position: relative;
    overflow: hidden;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding: 12px 28px;
    gap: 8px;
    border-radius: 8px;
    font-family: var(--font), sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #0054AA;
    color: #0054AA!important;
    white-space: nowrap;
    min-width: max-content;
}
.btn-secondary2 .label {
    position: relative;
}

.btn-secondary2:before {
    content: '';
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 500ms;
    background-color: #F2F9FF;
    border-radius: 9999px;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.btn-secondary2:disabled {
    border-color: #EBEBEB;
    color: #C0C1C1!important;
}

@media (any-hover: hover) {
    .btn-secondary2:hover::before {
        width: 155%;
        height: 19em;
    }
}



/*.btn-tertiary*/
.btn-tertiary {
    position: relative;
    overflow: hidden;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    border-radius: 8px;
    font-family: var(--font), sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    background: #F0F0F0;
    border: 1px solid #F0F0F0;
    color: #000000!important;
    white-space: nowrap;
    min-width: max-content;
}
.btn-tertiary .label {
    position: relative;
}

.btn-tertiary:before {
    content: '';
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 500ms;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 9999px;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.btn-tertiary:disabled {
    border-color: #EBEBEB;
    color: #C0C1C1!important;
}

@media (any-hover: hover) {
    .btn-tertiary:hover::before {
        width: 155%;
        height: 19em;
    }
}





.btn-primary-new1 {
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hsla(194 100% 69% / 1);
    --btn-bg-2: hsla(217 100% 56% / 1);
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    padding: 12px 28px;
    gap: 8px;
    border-radius: 8px;
    font-family: var(--font), sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(
            325deg,
            var(--btn-bg-2) 0%,
            var(--btn-bg-1) 55%,
            var(--btn-bg-2) 90%
    );
    border: none;
    color: var(--btn-bg-color);
    /*box-shadow:*/
    /*        0px 0px 20px rgba(71, 184, 255, 0.5),*/
    /*        0px 5px 5px -1px rgba(58, 125, 233, 0.25),*/
    /*        inset 4px 4px 8px rgba(175, 230, 255, 0.5),*/
    /*        inset -4px -4px 8px rgba(19, 95, 216, 0.35);*/
}

.btn-primary-new1:hover {
    background-position: right top;
}

.btn-primary-new1:is(:focus, :focus-visible, :active) {
    outline: none;
    /*box-shadow:*/
    /*        0 0 0 3px var(--btn-bg-color),*/
    /*        0 0 0 6px var(--btn-bg-2);*/
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary-new1 {
        transition: linear;
    }
}





.btn-primary-new2 {
    background-color: #f3f7fe;
    color: #0054AA;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    width: 100px;
    padding: 12px 28px;
    gap: 8px;
    font-family: var(--font), sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    transition: 0.3s;
    white-space: nowrap;
    min-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary-new2:hover {
    background-color: #0054AA;
    box-shadow: 0 0 0 5px #3b83f65f;
    color: #fff;
}