:root{

  --clm-blue:
    #155a96;

  --clm-blue-hover:
    #104b80;

  --clm-blue-active:
    #0c3f6d;

}


/* ============================================================
   CLASSE GLOBAL APLICADA PELO JS
============================================================ */

button.clm-primary-action,
a.clm-primary-action{

  background:
    var(--clm-blue) !important;

  border-color:
    var(--clm-blue) !important;

  color:
    #fff !important;

  box-shadow:
    none !important;

}


button.clm-primary-action:hover,
a.clm-primary-action:hover{

  background:
    var(--clm-blue-hover) !important;

  border-color:
    var(--clm-blue-hover) !important;

}


button.clm-primary-action:active,
a.clm-primary-action:active{

  background:
    var(--clm-blue-active) !important;

  border-color:
    var(--clm-blue-active) !important;

}


/* ============================================================
   CLASSES PRINCIPAIS JÁ CONHECIDAS
============================================================ */

.cli-btn-primary,
.forn-btn-primary,
.oc4-btn-dark,
.cadaux-primary,
.trans-btn-primary,
.crud-btn-primary,
.cr-primary,
.fin-btn-primary{

  background:
    var(--clm-blue) !important;

  border-color:
    var(--clm-blue) !important;

  color:#fff !important;

}


.cli-btn-primary:hover,
.forn-btn-primary:hover,
.oc4-btn-dark:hover,
.cadaux-primary:hover,
.trans-btn-primary:hover,
.crud-btn-primary:hover,
.cr-primary:hover,
.fin-btn-primary:hover{

  background:
    var(--clm-blue-hover) !important;

  border-color:
    var(--clm-blue-hover) !important;

}


/* SECUNDÁRIOS CONTINUAM BRANCOS */

.cli-btn-light,
.forn-btn-light,
.oc4-btn-light,
.oc4-btn-outline,
.cadaux-light,
.trans-btn-light,
.trans-btn-outline{

  background:#fff !important;

  color:#475467 !important;

}