/*
=========================================================
   HELCU — PROFILE CARD
   DISTANCE FROM VISITOR

   RESPONSIVE BEHAVIOUR
   -------------------------------------------------------
   0px → 1199.98px
       Distance visible

   1200px+
       Distance hidden

   IMPORTANT
   -------------------------------------------------------
   This CSS controls ONLY:

   .hc-profile-distance
   .hc-profile-distance i
   .hc-profile-distance span
=========================================================
*/


/* =========================================================
   BASE — MOBILE
   0px → 767.98px
   ========================================================= */

.hc-profile-distance {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 6px;

    min-width: 0;

    margin-top: 0;

    padding: 0;

    box-sizing: border-box;

}


/*
---------------------------------------------------------
   DISTANCE ICON
---------------------------------------------------------
*/

.hc-profile-distance i {

    flex: 0 0 auto;

    margin-top: 2px;

    font-size: 12px;

    line-height: 1;

    color: #0A9396;

}


/*
---------------------------------------------------------
   DISTANCE TEXT
---------------------------------------------------------
*/

.hc-profile-distance span {

    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.45;

    color: #6B7280;

}


/* =========================================================
   TABLET
   768px → 1199.98px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) {

    /*
    ---------------------------------------------------------
       DISTANCE CONTAINER
    ---------------------------------------------------------
    */

    .hc-profile-distance {

        gap: 6px;

    }


    /*
    ---------------------------------------------------------
       DISTANCE ICON
    ---------------------------------------------------------
    */

    .hc-profile-distance i {

        margin-top: 2px;

        font-size: 13px;

    }


    /*
    ---------------------------------------------------------
       DISTANCE TEXT
    ---------------------------------------------------------
    */

    .hc-profile-distance span {

        font-size: 11px;

        font-weight: 500;

        line-height: 1.45;

        color: #6B7280;

    }

}


/* =========================================================
   DESKTOP
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    /*
    ---------------------------------------------------------
       DISTANCE HIDDEN ON DESKTOP
       
       Distance is intentionally shown only on
       mobile and tablet devices.
    ---------------------------------------------------------
    */

    .hc-profile-distance {

        display: none;

    }

}