.b-secondary, .b-secondary-lg {
    background: var(--c-secondary-gray);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--c-dark-gray);
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    text-align: center;
    outline: none;
    border: none;
    display: inline-block;
}
.b-secondary:hover,.b-secondary-lg:hover {
    background: var(--c-secondary-gray-darker);
    color: var(--c-dark-gray-darker);
}

.b-secondary-lg {
    padding: 17px 20px;
    outline: none;
    border: none;
}

.b-primary {
    background: var(--c-primary);
    border-radius: 10px;
    padding: 17px 20px;
    font-size: 14px;
    color: #fff;
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    border: none;
    text-align: center;
    outline: none;
    border: none;
}
.b-primary:hover {
    background: var(--c-primary-dark);
    color: rgb(228, 227, 227);
}

.b-green {
    background: var(--c-green);
    border-radius: 10px;
    padding: 17px 20px;
    font-size: 14px;
    color: #fff;
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    border: none;
    text-align: center;
    outline: none;
    border: none;
}
.b-green:hover {
    background: var(--c-primary);
    color: rgb(228, 227, 227);
}

.b-green {
    background: var(--c-green);
    border-radius: 10px;
    padding: 17px 20px;
    font-size: 14px;
    color: #fff;
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    border: none;
    text-align: center;
}
.b-green:hover {
    background: var(--c-primary);
    color: rgb(228, 227, 227);
}

.b-primary-sm {
    background: var(--c-primary);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    border: none;
    outline: none;
    border: none;
    text-align: center;
}
.b-primary-sm:hover {
    background: var(--c-primary-dark);
    color: rgb(228, 227, 227);
}


.b-border-gray {
    border-radius: 8px;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #EDE8E9;
    text-decoration: none;
}

.b-border-gray.with-icon {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    
}

.b-border-gray-sm {
    background: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--c-dark-gray);
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    text-align: center;
    border: 1px solid #EDE8E9;
}
.b-border-gray-sm:hover {
    background: #ededed;
    color: var(--c-dark-gray-darker);
}

.b-primary-opacity {
    background: var(--c-primary-opacity);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--c-primary);
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    border: none;
    text-align: center;
}
.b-primary-opacity.selected {
    background: var(--c-primary);
    color: #FFF;
}
.b-primary-opacity:hover {
    background: var(--c-primary-opacity-darker);
    color: var(--c-primary);
}

.b-primary-opacity.selected:hover {
    background: var(--c-primary);
    color: rgb(228, 227, 227);
}

/* With Icon */
.b-secondary.with-icon span, .b-primary.with-icon span, .b-primary-sm.with-icon span, .b-border-gray-sm.with-icon span, .b-danger-sm.with-icon span {
    display:inline;
    display:inline-table;
    display:inline-block;
    vertical-align:middle;
}

.btn-light-gray {
    background: linear-gradient(0deg, rgba(58, 51, 53, 0.04), rgba(58, 51, 53, 0.04)), #FFFFFF;
    border-radius: 10px;
    padding: 14px;
    font-size: 14px;
    color: var(--c-dark-gray);
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    text-align: center;
}

.b-primary.disabled, .b-primary-sm.disabled {
    background-color: var(--c-secondary-gray);
    cursor: not-allowed;
    color: var(--c-dark-gray);
}

.b-primary.disabled:hover, .b-primary-sm.disabled:hover {
    background: var(--c-secondary-gray-darker);
    color: var(--c-dark-gray-darker);
}

.b-danger-sm {
    background: var(--c-secondary);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: #FFF;
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    text-align: center;
    border: 1px solid var(--c-secondary);
}
.b-danger-sm:hover {
    background: var(--c-secondary-dark);
    border: 1px solid var(--c-secondary-dark);
    color: rgb(228, 227, 227);
}

.b-danger {
    background: var(--c-secondary);
    border-radius: 10px;
    padding: 17px 20px;
    font-size: 14px;
    color: #fff;
    font-family: InterBold;
    text-decoration: none;
    transition: .3s;
    border: none;
    text-align: center;
    outline: none;
    border: none;
}
.b-danger:hover {
    background: var(--c-secondary-dark);
    color: rgb(228, 227, 227);
}

.btn-order {
    background: #FFFFFF;
    border: 1px solid #FFF;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 10px 20px;
    color: var(--c-dark-gray);
    text-decoration: none;
    font-family: InterBold;
}

.btn-order:hover {
    color: var(--c-dark-gray);
}

.btn-order.selected {
    background: #FFFFFF;
    border: 1px solid #EDE8E9;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 10px 20px;
    color: var(--c-black);
    text-decoration: none;
    font-family: InterBold;
}

.btn-order.selected:hover {
    color: var(--c-black);
}

.b-choose-event {
    background: var(--c-primary-opacity);
    border-radius: 10px;
    padding: 0px;
    width: 86px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--c-primary);
    font-family: InterMedium;
    text-decoration: none;
    transition: .3s;
    border: none;
    text-align: center;
}
.b-choose-event.selected {
    background: var(--c-primary);
    color: #FFF;
}
.b-choose-event:hover {
    background: var(--c-primary-opacity-darker);
    color: var(--c-primary);
}

.b-choose-event.selected:hover {
    background: var(--c-primary);
    color: rgb(228, 227, 227);
}

.b-signup {
    padding: 12px;
    background-color: var(--c-secondary);
    text-align: center;
    border-radius: 10px;
    color: #FFF;
    min-width: 116px;
    font-size: 14px;
    font-weight: 700;
    -webkit-transition: .3s;
    transition: .3s;
}

.b-signup:hover {
    background-color: var(--c-secondary-dark);
    color: #e6e3e3;
}