@import url("colors.css");

@font-face {
    font-family: IbmPlexSans-Regular;
    src: url(../fonts/ibm_plex_sans/IBMPlexSans-Regular.ttf);
}

@font-face {
    font-family: IbmPlexSans-Bold;
    src: url(../fonts/ibm_plex_sans/IBMPlexSans-Bold.ttf);
}

/*
* BACKGROUNDS
*/
.bg-dip-primary {
    background-color: var(--dip-primary) !important;
}

.bg-dip-secondary {
    background-color: var(--dip-secondary) !important;
}

.bg-dip-dark {
    background-color: var(--dip-dark) !important;
}

.bg-dip-light {
    background-color: var(--dip-light) !important;
}

.bg-ndb-primary {
    background-color: var(--ndb-primary) !important;
}

.bg-ndb-secondary {
    background-color: var(--ndb-secondary) !important;
}

.bg-ndb-dark {
    background-color: var(--ndb-dark) !important;
}

.bg-ndb-light {
    background-color: var(--ndb-light) !important;
}

/*
* BUTTONS
*/

.btn-ci {
    border: solid 1px transparent !important;
    transition: all 0.3s ease-in-out !important;
}

.btn-dip-primary {
    background-color: var(--dip-primary) !important;
}

.btn-dip-secondary {
    background-color: var(--dip-secondary) !important;
}

.btn-dip-dark {
    background-color: var(--dip-dark) !important;
}

.btn-dip-light {
    background-color: var(--dip-light) !important;
}


.btn-dip-primary:hover {
    background-color: var(--dip-primary-alpha) !important;
    border-color: var(--dip-primary) !important;
}

.btn-dip-secondary:hover {
    background-color: var(--dip-secondary-alpha) !important;
    border-color: var(--dip-secondary) !important;
}

.btn-dip-dark:hover {
    background-color: var(--dip-dark-alpha) !important;
    border-color: var(--dip-dark) !important;
}

.btn-dip-light:hover {
    background-color: var(--dip-light-alpha) !important;
    border-color: var(--dip-light) !important;
}

/******/

.btn-ndb-primary {
    background-color: var(--ndb-primary) !important;
}

.btn-ndb-secondary {
    background-color: var(--ndb-secondary) !important;
}

.btn-ndb-dark {
    background-color: var(--ndb-dark) !important;
}

.btn-ndb-light {
    background-color: var(--ndb-light) !important;
}

.btn-ndb-primary:hover {
    background-color: var(--ndb-primary-alpha) !important;
    border-color: var(--ndb-primary) !important;
}

.btn-ndb-secondary:hover {
    background-color: var(--ndb-secondary-alpha) !important;
    border-color: var(--ndb-secondary) !important;
}

.btn-ndb-dark:hover {
    background-color: var(--ndb-dark-alpha) !important;
    border-color: var(--ndb-dark) !important;
}

.btn-ndb-light:hover {
    background-color: var(--ndb-light-alpha) !important;
    border-color: var(--ndb-light) !important;
}