.button {
    font-weight: var(--inter-font);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.button:hover {
    font-weight: var(--inter-font);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    border: none;
}

.primary {
    background-color: var(--primary-blue-600);
    color: #FFFFFF;
    border: 1px solid var(--primary-blue-600);
}

.primary:hover {
    background-color: var(--primary-blue-200);
    color: #FFFFFF !important;
    border: 1px solid var(--primary-blue-200) !important;
}

.secondary {
    background-color: #FFFFFF;
    color: var(--primary-gray-700);
    border: 1px solid #D0D5DD;
}

.secondary:hover {
    background-color: #FFFFFF;
    color: var(--primary-gray-700) !important;
    border: 1px solid #D0D5DD !important;
}

.traity {
    background-color: var(--secondary-gray);
    color: var(--primary-blue-700);
    border: 1px solid var(--secondary-gray);
}

.traity:hover {
    background-color: var(--secondary-gray);
    color: var(--primary-blue-700) !important;
    border: 1px solid var(--secondary-gray) !important;
}

.link {
    background-color: #08348d;
    color: var(--primary-indego-50);
    border: none;
    box-shadow: none !important;
}

.link:hover {
    background-color: rgba(121, 236, 67, 0.1);
    color: var(--primary-gray-600) !important;
    border: none !important;
    box-shadow: none !important;
}

.large {
    padding: 10px 18px;   
}

.default {
    height: 36px;
}

.radius-0 {
    border-radius: 0px !important;
}

.radius-8 {
    border-radius: 8px !important;
}

.radius-32 {
    border-radius: 32px !important;
}
