body {
    background-color: #f0f0f0;
}

.home_content {
    margin: 15px 0;
    background: white;
    padding: 12px 0;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 9px;
    border-radius: 6px;
}

.userhome-icon img {
    max-width: 40px !important;
}

.userhome-icon {
    /*padding-top: 50px;*/
    text-align: center;
}

.userhome-icon a {
  padding: 8px;
    display: flex ;
    border-radius: 10px;
    margin: 0px 20px;
    background: #37307d;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.userhome-text p {
  text-align: center;
    margin: auto;
    font-weight: 500;
    color: #000;
}

.item img {
    border-radius: 10px;
}

button.btn.btn-primary {
    background: #37307d;
    text-decoration: none;
    border: none;
    padding: 5px;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
}


.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    will-change: transform;
    transform: translateZ(0);
    display: flex;
    height: 66px;
    box-shadow: rgba(149, 157, 165, 0.2) -45px -12px 24px;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.bottom_mid {
    max-width: 100% !important;
    background: #37307d;
    border-radius: 50%;
    margin-top: -15px !important;
    padding: 11px;
}

.bottom_mid a img {
    max-width: 50px;
}

.mobile-bottom-nav__item {
    flex-grow: 1;
    text-align: center;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mobile-bottom-nav__item--active {
    color: red;
}

.mobile-bottom-nav__item-content {
    display: flex;
    flex-direction: column;
}

.mobile-bottom-nav__item-content {
    max-width: 45px;
    text-align: center;
    margin: auto;
}

    .mobile-bottom-nav__item-content p {
        margin: auto;
        color: #37307d;
        font-weight: 700;
    }

img.giftbox {
    max-width: 50px;
}
/*
img.next {
    max-width: 40px;
}*/

i.next {
    font-size: 33px;
    color: white;
}

.Opening-text {
    text-align: center;
}

section.box-Opening-b {
    padding: 10px;
    background: #37307d;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-top: 20px;
    border-radius: 10px;
}

.Opening-text {
    text-align: center;
    font-weight: 600;
    color: aliceblue;
    margin: auto;
    width: 100%;
}

.totel-coin {
    text-align: center;
    font-size: large;
    font-weight: 600;
    color: #ffc73b;
    margin: auto;
}

img.nav-icon {
    max-width: 25px;
}

div#owl-carousel {
    margin-top: 20px;
}

.main-navbar {
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px -31px 44px 0px;
}

.logo-company img {
    max-width: 100px !important;
    width: auto;
    text-align: center;
    margin-top: 0px;
}

.profile-img img {
    max-width: 45px;
}

.profile-img {
    text-align: end;
    /*margin-top: 6px;*/
}

.footer {
    margin-bottom: 60px;
}

    .footer p {
        text-align: center;
        color: #37307d;
        font-weight: 600;
        padding: 10px;
    }

table.table {
    margin-top: 30px;
}

.page-navbar {
    padding: 3px 10px;
    background: #37307d;
    margin-bottom: 30px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.img-areo a i {
    font-size: 35px;
    color: #fff;
}

.page-name h2 {
    font-size: 23px;
    color: #fff;
    margin-bottom: 0;
    font-weight: 400;
}

.page-name {
    text-align: end;
}

.img-user-main {
    text-align: center;
}


.shareArticle {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
    padding: 15px;
}

.shareSocial {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    background: #fff;
    border-radius: 20px;
}

@media (max-width: 767px) {
    .shareSocial {
        flex-flow: column;
    }
}

.shareSocial .socialTitle {
    margin: 0 15px 0 0;
    font-size: 20px;
}

@media (max-width: 767px) {
    .shareSocial .socialTitle {
        margin-bottom: 15px;
        text-align: center;
    }
}

.shareSocial .socialList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    justify-content: center;
    flex-flow: row wrap;
}

    .shareSocial .socialList li {
        margin: 5px;
    }

        .shareSocial .socialList li:first-child {
            padding-left: 0;
        }

        .shareSocial .socialList li a {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            text-decoration: none;
            background-color: #999;
            color: #fff;
            transition: 0.35s;
        }

            .shareSocial .socialList li a i {
                position: absolute;
                top: 50%;
                left: 50%;
                font-size: 24px;
                transform-origin: top left;
                transform: scale(1) translate(-50%, -50%);
                transition: 0.35s;
            }

            .shareSocial .socialList li a:hover i {
                transform: scale(1.5) translate(-50%, -50%);
            }

        .shareSocial .socialList li:nth-child(1) a {
            background-color: #135cb6;
        }

        .shareSocial .socialList li:nth-child(2) a {
            background-color: #00aced;
        }

        .shareSocial .socialList li:nth-child(3) a {
            background-color: #bd081c;
        }

        .shareSocial .socialList li:nth-child(4) a {
            background-color: #111;
        }

        .shareSocial .socialList li:nth-child(5) a {
            background-color: #1fb381;
        }

.shareLink .permalink {
    position: relative;
    border-radius: 30px;
}

    .shareLink .permalink .textLink {
        text-align: center;
        padding: 12px 60px 12px 30px;
        height: 45px;
        width: 450px;
        font-size: 16px;
        letter-spacing: 0.3px;
        color: #494949;
        border-radius: 25px;
        border: 1px solid #fff;
        background-color: #fff;
        outline: 0;
        appearance: none;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        transition: all 0.3s ease;
    }

@media (max-width: 767px) {
    .shareLink .permalink .textLink {
        width: 100%;
    }
}

.shareLink .permalink .textLink:focus {
    border-color: #d8d8d8;
}

.shareLink .permalink .textLink::selection {
    color: #fff;
    background-color: #37307d;
}

.shareLink .permalink .copyLink {
    position: absolute;
    top: 50%;
    right: 25px;
    cursor: pointer;
    transform: translateY(-50%);
}

    .shareLink .permalink .copyLink:hover:after {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }

    .shareLink .permalink .copyLink:after {
        content: attr(tooltip);
        width: 140px;
        bottom: -40px;
        left: 50%;
        padding: 5px;
        border-radius: 4px;
        font-size: 0.8rem;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        background-color: #000;
        color: #fff;
        transform: translateY(-10px) translateX(-50%);
        transition: all 300ms ease;
        text-align: center;
    }

    .shareLink .permalink .copyLink i {
        font-size: 20px;
        color: #37307d;
    }
.img-gif-referral img {
    max-width: 368px;
}
.logo-about img {
    max-width: 275px;
}
.logo-about {
    text-align: center;
}

.form-control {
    border: 1px solid #ced4da !important;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #37307d !important;
    box-shadow: none !important;
    outline: 0;
}

/*App button*/
.app_btn {
    position: relative;
    font-size: 21px;
    margin-top: 10px;
    text-decoration: none;
    padding: 7px 45px;
    line-height: 35px;
    display: inline-block;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.2s;
    border: none;
    font-weight: 600;
    color: #fff;
    background-color: #37307d;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.app_btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.app_btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}



.img-areo img {
    max-width: 60px;
    padding: 10px;
}
.page-name {
    margin-top: 12px;
}