/*!* Coolors Exported Palette - coolors.co/7e6b8f-96e6b3-da3e52-a3d9ff-f2e94e *!*/
/*!* HSL *!*/
/*!* RGB *!*/


/*.cover {*/
    /*width: 100%; !* or any custom size *!*/
    /*height: 100%;*/
    /*object-fit: cover;*/
/*}*/

/* modal div width for pic modals */
@media (min-width: 576px)
{
    .modal-dialog {
        max-width: 80%;
        margin: 1.75rem auto;
    }
}

/* make buttons smaller */
.blue-btn-style {
    padding: 10px 18px !important;
}


.nav.nav-tabs .nav-item .nav-link {
    padding: 13px 25px 8px !important;
}

div.circle-avatar{
    /* make it responsive */
    max-width: 100%;
    width:100%;
    height:auto;
    display:block;
    /* div height to be the same as width*/
    padding-top:100%;

    /* make it a circle */
    border-radius:50%;

    /* Centering on image`s center*/
    background-position-y: center;
    background-position-x: center;
    background-repeat: no-repeat;

    /* it makes the clue thing, takes smaller dimension to fill div */
    background-size: cover;

    /* it is optional, for making this div centered in parent*/
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}