.button {
  display: inline-block;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  align-items: center;
  text-decoration: none;
}

.button.disabled,
.button:disabled {
  opacity: .5;
  pointer-events: none;
}

/* Button Primary */
.button-primary{
  border: solid 2px #0369A1; /* sky/700 */
  color: white;
  background: #0369A1;  /* sky/700 */
}

.button-primary:hover, .button-primary:focus{
  border: solid 2px #075985; /* sky/800 */
  background: #075985; /* sky/800 */
  color: white;
}

.button-primary:active, .button-primary.active{
  border: solid 2px #075985; /* sky/800 */
  background: #075985; /* sky/800 */
  color: white;
}

/* Button Secondary */

.button-secondary{
  border: solid 2px #0369A1; /* sky/700 */
  color: #0369A1; /* sky/700 */
  background: white;
}

.button-secondary:hover, .button-secondary:focus{
  background: #E0F2FE; /* sky/100 */
  color: #0369A1; /* sky/700 */
}

.button-secondary:active, .button-secondary.active{
  background: #BAE6FD; /* sky/200 */
  color: #075985; /* sky/800 */
}

/* Button Tertiary */

.button-tertiary{
  border: 0;
  color: #0369A1; /* sky/700 */
  background-color: inherit;
}

.button-tertiary:hover, .button-tertiary:focus{
  background: #E0F2FE; /* sky/100 */
  color: #0369A1; /* sky/700 */
}

.button-tertiary:active, .button-tertiary.active{
  background: #BAE6FD; /* sky/200 */
  color: #075985; /* sky/800 */
}

/* Button Danger - Primary */

.button-danger {
  border: solid 2px #B91C1C; /* red/700 */
  color: white;
  background: #B91C1C;  /* red/700 */

}

.button-danger:hover, .button-danger:focus{
  border: solid 2px #991B1B; /* red/800 */
  background: #991B1B; /* red/800 */
  color: white;
}

.button-danger:active, .button-danger.active{
  border: solid 2px #991B1B; /* red/800 */
  background: #991B1B; /* red/800 */
  color: white;
}

/* Button Danger - Secondary */

.button-danger-secondary{
  border: solid 2px #B91C1C; /* red/700 */
  color: #B91C1C; /* red/700 */
  background: white;
}

.button-danger-secondary:hover, .button-danger-secondary:focus{
  background: #FEE2E2; /* red/100 */
  color: #B91C1C; /* red/700 */
}

.button-danger-secondary:active, .button-danger-secondary.active{
  background: #FECACA; /* red/200 */
  color: #B91C1C; /* red/700 */
}

/* Button Danger - Tertiary */

.button-danger-tertiary{
  border: 0;
  color: #B91C1C; /* red/700 */
  background-color: inherit;
}

.button-danger-tertiary:hover, .button-danger-tertiary:focus{
  background: #FEE2E2; /* red/100 */
  color: #B91C1C; /* red/700 */
}

.button-danger-tertiary:active, .button-danger-tertiary.active{
  background: #FECACA; /* red/200 */
  color: #B91C1C; /* red/700 */
}

/* Button Warning - Primary */

.button-warning {
  border: solid 2px #A16207; /* yellow/700 */
  background: #A16207; /* yellow/700 */
  color: white;
}

.button-warning:hover, .button-warning:focus{
  border: solid 2px #854D0E; /* yellow/800 */
  background: #854D0E; /* yellow/800 */
  color: white;
}

.button-warning:active, .button-warning.active{
  border: solid 2px #854D0E; /* yellow/800 */
  background: #854D0E; /* yellow/800 */
  color: white;
}

/* Button Warning - Secondary */

.button-warning-secondary{
  border: solid 2px #A16207; /* yellow/700 */
  color: #A16207; /* yellow/700 */
  background: white;
}

.button-warning-secondary:hover, .button-warning-secondary:focus{
  background: #FEF9C3; /* yellow/100 */
  color: #A16207; /* yellow/700 */
}

.button-warning-secondary:active, .button-warning-secondary.active{
  background: #FEF08A; /* yellow/200 */
  color: #A16207; /* yellow/700 */
}

/* Button Warning - Tertiary */

.button-warning-tertiary{
  border: 0;
  color: #A16207; /* yellow/700 */
  background-color: inherit;
}

.button-warning-tertiary:hover, .button-warning-tertiary:focus{
  background: #FEF9C3; /* yellow/100 */
  color: #A16207; /* yellow/700 */
}

.button-warning-tertiary:active, .button-warning-tertiary.active{
  background: #FEF08A; /* yellow/200 */
  color: #A16207; /* yellow/700 */
}

/* Button Success - Primary */

.button-success {
  border: solid 2px #15803D; /* green/700 */
  background: #15803D; /* green/700 */
  color: white;
}

.button-success:hover, .button-success:focus{
  border: solid 2px #166534; /* green/800 */
  background: #166534; /* green/800 */
  color: white;
}

.button-success:active, .button-success.active{
  border: solid 2px #166534; /* green/800 */
  background: #166534; /* green/800 */
  color: white;
}

/* Button Success - Secondary */

.button-success-secondary{
  border: solid 2px #15803D; /* green/700 */
  color: #15803D; /* green/700 */
  background: white;
}

.button-success-secondary:hover, .button-success-secondary:focus{
  background: #DCFCE7; /* green/100 */
  color: #15803D; /* green/700 */
}

.button-success-secondary:active, .button-success-secondary.active{
  background: #BBF7D0; /* green/200 */
  color: #15803D; /* green/700 */
}

/* Button Success - Tertiary */

.button-success-tertiary{
  border: 0;
  color: #15803D; /* green/700 */
  background-color: inherit;
}

.button-success-tertiary:hover, .button-success-tertiary:focus{
  background: #DCFCE7; /* green/100 */
  color: #15803D; /* green/700 */
}

.button-success-tertiary:active, .button-success-tertiary.active{
  background: #BBF7D0; /* green/200 */
  color: #15803D; /* green/700 */
}

/* Button Beta - Primary */
.button-beta{
  border: solid 2px #9333EA; /* purple/600 */
  color: white;
  background: #9333EA;  /* purple/600 */
}

.button-beta:hover, .button-beta:focus{
  border: solid 2px #7E22CE; /* purple/700 */
  background: #7E22CE; /* purple/700 */
  color: white;
}

.button-beta:active, .button-beta.active{
  border: solid 2px #6B21A8; /* purple/800 */
  background: #6B21A8; /* purple/800 */
  color: white;
}

/* Button Beta - Secondary */

.button-beta-secondary{
  border: solid 2px #7E22CE; /* purple/700 */
  color: #7E22CE; /* purple/700 */
  background: white;
}

.button-beta-secondary:hover, .button-beta-secondary:focus{
  background: #F3E8FF; /* purple/100 */
  color: #7E22CE; /* purple/700 */
}

.button-beta-secondary:active, .button-beta-secondary.active{
  background: #E9D5FF; /* purple/200 */
  color: #7E22CE; /* purple/700 */
}

/* Button Beta - Tertiary */

.button-beta-tertiary{
  border: 0;
  color: #7E22CE; /* purple/700 */
  background-color: inherit;
}

.button-beta-tertiary:hover, .button-beta-tertiary:focus{
  background: #F3E8FF; /* purple/100 */
  color: #7E22CE; /* purple/700 */
}

.button-beta-tertiary:active, .button-beta-tertiary.active{
  background: #E9D5FF; /* purple/200 */
  color: #7E22CE; /* purple/700 */
}

/* Table */

.table-bottom-border tr{
  border-bottom: 1px solid gray;
}

.table-bottom-border td{
  padding: .5rem .5rem .25rem;
}

.table-bottom-border tr td:first-child{
  text-align: left;
  font-weight: 500;
}

.table-bottom-border tr td:last-child{
  text-align: right;
}

/* Icons sizes */
/* 
  Note: Sizes are equal to line height of the text.
  this is to look aligned
  Look tw-colors.css, text sizes to compare
*/

i.rei-xs{
  font-size: 1rem;
}

i.rei-sm{
  font-size: 1.25rem;
}

i.rei-base{
  font-size: 1.5rem;
}

i.rei-lg{
  font-size: 1.75rem;
}

i.rei-xl {
  font-size: 1.75rem;
}

i.rei-2xl{
  font-size: 2rem;
}

i.rei-3xl{
  font-size: 2.25rem;
}

i.rei-4xl{
  font-size: 2.5rem;
}

/* Notification */

[class*="notification-"]{
  padding: 6px;
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
}

[class*="notification-"] i{
  font-weight: 700;
}

.notification-info{
  border-color: #0369A1;
  color: #0369A1;
  background-color: #E0F2FE;
  display: flex;
  align-items: start;
  gap: 8px;
}

.title-underline-xl{
  border-bottom: solid 1px lightgray;
  color: #0369A1;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
}