.btn{
    user-select: none;
    border-radius: 8px;
    transition: all 0.2s ease-in;
    cursor: pointer;
    color: var(--white);
    padding-left: 46px;
    padding-right: 46px;
    font-size: var(--sub-text-size);
    height: 45px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid var(--red);
    background-color: var(--red);
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;

}







.btn:hover{
    background-color: var(--red-two);
    border: 2px solid var(--red-two);
}

.btn:active{
    outline: 2px solid var(--yellow);
}

.btn:focus{
    outline: 2px solid var(--yellow);
}


.btn:disabled{
    transition: none;
    background-color: var(--red-three);
    border: 2px solid var(--red-three);
    cursor: not-allowed;
}







.btn:disabled:active{
    outline: none;
}



.btn__icon{

    margin-right: 10px;

}

.btn--small .btn__icon {
    margin-right: 6px;
}





.btn .btn__preloader{
    opacity: 0;
}

.btn--wait{
    color: transparent;
    transition: none;
    background-color: var(--red-three) !important;
    cursor: not-allowed;

}


.btn--wait:active{
    outline: none !important;
}

.btn--wait:focus{
    outline: none !important;
}



.btn--wait .btn__icon{
    opacity: 0;
}

.btn--wait .btn__preloader{
    opacity: 1;
}

.btn__preloader{
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    animation: var(--preloader);
}


.btn--large .btn__preloader {
    width: 30px;
    height: 30px;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
}


































.btn-empty{
    user-select: none;
    position: relative;
    transition: all 0.2s ease-in;
    cursor: pointer;
    height: 45px;
    background-color: var(--white);
    padding-left: 46px;
    padding-right: 46px;
    border: 2px solid var(--red);
    border-radius: 8px;
    color: var(--grey-one);
    font-size: var(--sub-text-size);
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.btn-empty:hover{
    color: var(--red);
    background-color: var(--red-opacity-6);
}
.btn-empty:active{
    /*color: var(--grey-one);*/
    border: 2px solid var(--yellow);
}

.btn-empty:disabled{
    transition: none !important;
    cursor: not-allowed;
    opacity: 0.46;
}



.btn-empty:disabled:hover{
    opacity: 0.46;
    color: var(--grey-one);
    background-color: var(--white);
}
.btn-empty:disabled:active{
    opacity: 0.46;
    border: 2px solid var(--red);
    color: var(--grey-one);
    background-color: var(--white);
}


.btn-empty--wait:hover{
    opacity: 0.46;
    color: var(--grey-one);
    background-color: var(--white);
}

.btn-empty--wait:active{
    opacity: 0.46;
    border: 2px solid var(--red) !important;
    color: var(--grey-one);
    background-color: var(--white);
}


.btn-empty--wait:focus{
    opacity: 0.46;
    border: 2px solid var(--red) !important;
    color: var(--grey-one);
    background-color: var(--white);
}




.btn-empty:focus{
    border: 2px solid var(--yellow);
    outline: none;
}


.btn-empty__icon{
    margin-right: 10px;
    transition: all 0.2s ease-in;
}

.btn-empty__icon path{
    transition: all 0.2s ease-in;
    fill: var(--grey-one);
}

.btn-empty:hover .btn-empty__icon path{
    fill: var(--red);
}




.btn-empty__preloader{
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    animation: var(--preloader);
}


.btn-empty .btn-empty__preloader{
    opacity: 0;
}



.btn-empty--wait{
    color: transparent;
    transition: none !important;
    cursor: not-allowed;
    opacity: 0.46;
}

.btn-empty--wait .btn-empty__preloader{
    opacity: 1;
}

.btn-empty--wait:hover {
    color: transparent;
}

.btn-empty--wait:disabled {
    color: transparent !important;
}








.btn--large{
    height: 56px !important;
    padding-left: 56px;
    padding-right: 56px;
    font-size: var(--text-size);
}

.btn--small{
    height: 32px !important;
    padding-left: 32px;
    padding-right: 32px;
    font-size: var(--mini-text-size);
}







@media(max-width: 1000px) {

    .btn{
        height: 40px;
    }


    .btn-empty{
        height: 40px;
    }

}