/* variables */
:root{
    /*colors*/
    --blue: #1f72b8;
    --red: #d03743;
    --yellow: #f8b236;
    --green: #028e38;
    /*borders*/
    --rounded: 10px;
}

/**
 * COMPONENTS
 */

/* basics */
.bg-blue{
    background: var(--blue);
}
.bg-red{
    background: var(--red);
}
.bg-yellow{
    background: var(--yellow);
}
.bg-green{
    background: var(--green);
}
.text-blue{
    color: var(--blue);
}
.text-red{
    color: var(--red);
}
.text-yellow{
    color: var(--yellow);
}
.text-green{
    color: var(--green);
}

/* panel */
.panel{
    border-radius: var(--rounded);
    background: #fff;
    border: 1px solid var(--blue);
    overflow: hidden;
}
.panel > .panel-heading{
    text-align: center;
    background-color: var(--blue);
    color: #fff;
}

/* butotns */
.btn{
    border-radius: var(--rounded);
}
.btn .btn-md{
    border-radius: var(--rounded);
}