/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */


.xcontainer {
          margin: 0 auto;
          padding-bottom: 50px;
          max-width: 375px;
          background: #fff;
          font-family: 'sora'!important;
        }

        .top-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: nowrap;
          padding: 29px 15px;
        }
        .top-bar__title {
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
        }
        .top-bar__title__text {
          font-size: 18px;
          margin:0;
        }
        .top-bar__title__verified-icon {
          margin-left: 4px;
          width: 15px;
          height: 14px;
        }

        .stats {
          padding: 0 15px;
          display: grid;
          grid-template-columns: auto 1fr;
          grid-column-gap: 10px;
        }
        .stats__img-holder {
          width: 90px;
          height: 90px;
          border-radius: 50%;
          border: 1px solid #d8d8d8;
          background: center/125% no-repeat;
        }
        .stats__data {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          align-items: center;
          text-align: center;
        }
        .stats__data__point {
          font-family: sans-serif;
        }
        .stats__data__point__value {
          font-size: 16px;
          font-weight: 600;
        }
        .stats__data__point__description {
          font-weight: 300;
          font-size: 14px;
          margin-top: 2px;
        }

        .description {
          padding: 0 15px;
        }
        .description h2 {
          font-size: 16px;
          margin: 0;
          margin-top: 16px;
          padding: 0;
        }
        .description p {
          margin-top: 4px;
          color: #444;
          font-size: 14px;
        }
        .description a {
          margin-top: 2px;
          color: #0D3A6B;
        }

        .actions {
          padding: 0 15px;
          margin-top: 14px;
          display: grid;
          grid-template-columns: 1fr 1fr 34px;
          grid-column-gap: 6px;
        }
        .actions__btn {
          font-size: 15px;
          border-radius: 4px;
          border: 1px solid #d8d8d8;
          height: 32px;
          display: block;
          width: 100%;
        }
        .actions__btn--icon {
          display: flex;
        }
        .actions__btn--icon i {
          margin: auto;
          font-size: 16px;
        }
        .actions__btn--active {
          background: #3797F0;
          border: 1px solid #3797F0;
          color: white;
        }

        img.tabs__btn__icon {
            width: 23px;
            margin-bottom: 4px;
        }

        section.actions button.actions__btn {
            font-size: 12px;
            font-weight: 600;
            font-family: 'sora';
        }

        .stories {
          margin-top: 14px;
          padding: 0 10px;
          white-space: nowrap;
          overflow-x: auto;
          overflow-y: scroll;
          scrollbar-width: none;
          /* Firefox */
          -ms-overflow-style: none;
          /* Internet Explorer 10+ */
        }
        .stories::-webkit-scrollbar {
          /* WebKit */
          width: 0;
          height: 0;
        }
        .stories__single {
          display: inline-block;
        }
        .stories__single__img-holder {
          display: inline-block;
          border-radius: 50%;
          border: 1px solid #d8d8d8;
          padding: 3px;
          position: relative;
          left: 50%;
          transform: translatex(-50%);
          margin-right: 12px;
        }
        .stories__single__img-holder__inner {
          border-radius: 50%;
          border: 1px solid #d8d8d8;
          width: 60px;
          height: 60px;
          background: center/cover no-repeat;
        }
        .stories__single__description {
          text-align: center;
          font-size: 14px;
          margin-top: 2px;
          color: #444;
        }

        .tabs {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          border-top: 1px solid #d8d8d8;
          margin-top: 20px;
        }
        .tabs__btn {
          display: flex;
          padding-top: 6px;
          padding-bottom: 5px;
          border-bottom: 1px solid transparent;
        }
        .tabs__btn__icon {
          margin: auto;
          max-width: 22px;
        }
        .tabs__btn--active {
          border-bottom: 1px solid #444;
        }

        .grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 1px;
        }
        .grid__photo {
          display: block;
          width: 100%;
          height: calc(375px / 3);
          background: center/cover no-repeat;
        }

        .bottom-bar {
          width: calc(375px + 2px);
          height: 50px;
          position: relative;
          bottom: 0;
          left: 50%;
          transform: translatex(-50%);
          z-index: 1;
          background: white;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
        .bottom-bar__btn__icon {
          width: 22px;
          text-align: center;
        }

        button.bottom-bar__btn {
            background: #fff;
            border: #fff;
        }

        button.top-bar__back-btn, button.actions__btn, button.actions__btn.actions__btn--icon, .tabs__btn, button.top-bar__menu-btn {
            background: transparent;
        }
        [type=button], [type=submit], button {
            color: #000;
            border-color: #000;
        }

        [type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
            color: #000;
            background-color: #000;
            text-decoration: none;
        }


        button.tabs__btn {
            border: none;
        }

        button.actions__btn.actions__btn--icon {
            padding: 0;
        }
        button.actions__btn.actions__btn--active {
            background: #3797F0;
        }

        .grid__photo_container{position: relative;}

        .likes_container {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
        }

        img.img-heart-ig {
            width: 22px;
        }

        .likes_container {

            margin-top: 122%;
            transition: 1s ease .5s;
            overflow: hidden;
        }

        .likes_container span {
            color: #fff;
            margin-right: 2px;
        }

        .likes_subcointaienr { z-index: 999; }
        .likes_subcointaienr { background: #e84e62; padding: 2px 9px; border-radius: 7px; }
        .likes_subcointaienr i { color: #fff; font-size: 12px; }
        .likes_subcointaienr span { font-size: 13px; padding-right: 2px; }


        .likes_container::after {
            content: "";
            position: absolute;
            width: 15px;
            height: 15px;
            background: #e84e62;
            bottom: 0;
            left: 44%;
            right: 0;
            top: 51%;
            transform: rotate(45deg);
            z-index: 9;
        }

        .loader-ig {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            background: #ffff;
        }

        .loader-ig img {
            width: 63px;
        }

        .pulse {
          animation: pulse 1s infinite ease-in-out alternate;
        }
        @keyframes pulse {
          from { transform: scale(0.8); }
          to { transform: scale(1.2); }
        }

       .hidetemp{display: none;}