/* CSS */

.mgT { font-family: Arial, Helvetica, sans-serif; font-size: 16px; -webkit-tap-highlight-color: transparent !important;}
.mgT p { margin-bottom: 0 !important;}

.boxVMore { position: relative;}
.boxVMoreTxtBox { max-height: 50px; overflow: hidden;}
.boxVMoreBtn { position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; padding: 0; background-image: linear-gradient(to bottom, transparent, #ffffff);}
.boxVMoreBtn a { display: block; text-align: center; padding: 20px 0 0 0; color: #1588c2; font-size: 14px; text-decoration: none !important;}
.boxVMoreBtn a .icon { display: inline-block; font-size: 24px; font-weight: bold; transform: rotateZ(90deg); margin-bottom: -12px;}


/* Template 1 */

.mgT1 .online i { display: block; width: 8px; height: 8px; border-radius: 50%; background-color: #15a715;}
.mgT1 .verified i { display: block; background-color: #3aa6e4; font-size: 10px; color: white; width: 13px; height: 15px; border-radius: 50%; line-height: 16px; text-align: center; padding-top: 1px; padding-right: 3px;}

.mgT1Box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 8px;}
.mgT1Box.mobOneCol { grid-template-columns: repeat(1, minmax(0, 1fr));}
.mgT1BoxItem a { display: block; text-decoration: none !important; color: #656779; box-shadow: 0 0 5px 2px #46475328; border-radius: 5px; overflow: hidden; transition: box-shadow 0.3s;}
.mgT1BoxItem a img { width: 100%; height: 200px; object-fit: cover; object-position: center;}
.mgT1Box.mobOneCol a img { height: 300px;}
.mgT1BoxItem a > div { padding: 12px;}
.mgT1BoxItem a > div .nameBox { margin-bottom: 12px; display: flex; align-items: center;}
.mgT1BoxItem a > div .nameBox strong { display: block; width: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mgT1BoxItem a > div .nameBox span { flex-shrink: 0;}
.mgT1BoxItem a > div .nameBox span.verified { margin-left: 8px; margin-right: 6px;}
.mgT1BoxItem a > div .nameBox span.online { margin-left: auto;}
.mgT1BoxItem a > div .city { font-size: 0.85rem; color: #888996; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mgT1BoxItem a > div .about { display: none;}
.mgT1BoxItem a:hover { box-shadow: 0 0 5px 2px #4647534d;}

.mgT1Pop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; background-color: white; display: none; align-items: start; justify-content: center; overflow-y: auto;}
.mgT1PopBox { position: relative; background-color: white; width: 100%; height: 100%; display: flex; align-items: stretch; justify-content: stretch;}
.mgT1PopBox .close { position: absolute; right: 8px; top: 8px; z-index: 100001;}
.mgT1PopBox .close i { display: flex; align-items: center; justify-content: center; font-size: 36px; color: #5c5351; text-align: center; width: 33px; height: 36px; background-color: white; border-radius: 50%; box-shadow: 0 0 0 1px #eeeeee; padding-right: 3px;}

.mgT1PopBoxFlex { display: flex; flex-direction: column; padding: 16px;}
.mgT1PopBoxFlex .header { display: block; flex-shrink: 0;}
.mgT1PopBoxFlex .photos { position: relative; border-radius: 5px;}
.mgT1PopBoxFlex .photos > img { display: block; width: 100%; max-height: 40vh; object-fit: cover; object-position: center; border-radius: 5px;}
.mgT1PopBoxFlex .nameBox { display: flex; align-items: center; color: #424455; padding: 8px 0; margin-bottom: 8px;}
.mgT1PopBoxFlex .nameBox .avatar { width: 50px; margin-right: 8px;}
.mgT1PopBoxFlex .nameBox .avatar img { width: 50px; height: 50px; object-fit: cover; object-position: center; border-radius: 50%;}
.mgT1PopBoxFlex .nameBox .nameage { width: 36%;}
.mgT1PopBoxFlex .nameBox .name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 19px; margin-bottom: 4px;}
.mgT1PopBoxFlex .nameBox .name strong { width: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mgT1PopBoxFlex .nameBox .cityonline { margin-left: auto;}
.mgT1PopBoxFlex .nameBox .age { font-size: 0.85rem; color: #888996;}
.mgT1PopBoxFlex .nameBox .icons { display: flex; align-items: center; justify-content: right; gap: 8px; margin-bottom: 8px;}
.mgT1PopBoxFlex .nameBox .icons .text { font-size: 12px;}
.mgT1PopBoxFlex .nameBox .city { font-size: 0.85rem; color: #888996; text-align: right;}
.mgT1PopBoxFlex .about { font-size: 14px; color: #3f3f3f; margin-bottom: 8px; flex-grow: 1; max-height: calc(100% - 360px); overflow-y: auto !important;}
.mgT1PopBoxFlex .about .terms { display: none; font-size: 11px; color: #bebebe; font-weight: 300; padding-top: 16px;}
.mgT1PopBoxFlex .about .terms a { color: #9e9e9e; text-decoration: none !important;}
.mgT1PopBoxFlex .about p { margin: 0; margin-bottom: 16px;}
.mgT1PopBoxFlex .about p:last-child { margin-bottom: 0;}
.mgT1PopBoxFlex .send { margin-top: auto; flex-shrink: 0; padding: 16px 0 0 0;}
.mgT1PopBoxFlex .send .cinfo { display: none;}
.mgT1PopBoxFlex .send .sendbtn { display: block; color: white; text-align: center; padding: 12px 24px; border-radius: 5px; cursor: pointer; text-decoration: none !important; transition: background-color 0.3s;}
.mgT1PopBoxFlex .send .sendbtn.green { background-color: #23bf08;}
.mgT1PopBoxFlex .send .sendbtn.red { background-color: #bf0808;}
.mgT1PopBoxFlex .send .sendbtn.blue { background-color: #1650bd;}
.mgT1PopBoxFlex .send .sendbtn.orange { background-color: #ff6600;}
.mgT1PopBoxFlex .send .sendbtn.purple { background-color: #8b08bf;}
.mgT1PopBoxFlex .send .sendbtn.gray { background-color: #8a8a8a;}
.mgT1PopBoxFlex .send .sendbtn.green:hover { background-color: #1a8e06;}
.mgT1PopBoxFlex .send .sendbtn.red:hover { background-color: #8e0606;}
.mgT1PopBoxFlex .send .sendbtn.blue:hover { background-color: #0d3c92;}
.mgT1PopBoxFlex .send .sendbtn.orange:hover { background-color: #db600e;}
.mgT1PopBoxFlex .send .sendbtn.purple:hover { background-color: #8e0687;}
.mgT1PopBoxFlex .send .sendbtn.gray:hover { background-color: #6d6d6d;}

@media (min-width: 768px) {

    .mgSiteContainer { width: 768px; margin: 60px auto; padding: 10px;}

    .mgT1Box { grid-template-columns: repeat(3, minmax(0, 1fr));}
    .mgT1Pop { background-color: #000000bb;}
    .mgT1PopBox { width: 380px; margin-top: 6vh; max-height: 88vh; border-radius: 5px;}
    .mgT1PopBox .close { right: -12px; top: -12px;}
    .mgT1PopBoxFlex .about { max-height: calc(100vh - 360px);}
}

@media (min-width: 992px) {

    .mgSiteContainer { width: 992px; margin: 60px auto; padding: 10px;}

    .mgT1Box { grid-template-columns: repeat(4, minmax(0, 1fr));}
    .mgT1PopBox { width: 420px; margin-top: 8vh; max-height: 84vh; border-radius: 5px;}
}


/* Template 2 */

.mgT2 .online i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #3ab83a;}

.mgT2Box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 8px;}
.mgT2Box.mobOneCol { grid-template-columns: repeat(1, minmax(0, 1fr));}
.mgT2BoxItem a { display: block; text-decoration: none !important; color: #535564; overflow: hidden;}
.mgT2BoxItem a img { width: 100%; height: 200px; object-fit: cover; object-position: center;}
.mgT2Box.mobOneCol a img { height: 300px;}
.mgT2BoxItem a > div { padding: 8px 0;}
.mgT2BoxItem a > div .nameBox { margin-bottom: 12px; display: flex; align-items: start; justify-content: space-between;}
.mgT2BoxItem a > div .nameBox strong { display: block; max-width: 35%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mgT2BoxItem a > div .nameBox strong:first-child { max-width: 65% !important;}
.mgT2BoxItem a > div .nameBox strong span { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mgT2BoxItem a > div .nameBox strong > span > span { display: block; font-size: 12px; color: #868ba1; font-weight: normal; text-align: right;}
.mgT2BoxItem a > div .nameBox span { flex-shrink: 0;}
.mgT2BoxItem a > div .nameBox span.online { font-size: 10px; color: #69c769; text-align: left; margin-top: 2px;}
.mgT2BoxItem a > div .nameBox span.city { margin-top: 2px; color: #a6abbd;}
.mgT2BoxItem a > div .about { font-size: 0.80rem; line-height: 1.1rem; color: #767786; width: 100%; height: 54px; overflow: hidden; margin-bottom: 8px;}
.mgT2BoxItem a > div .view { text-align: center; font-size: 13px; color: white; padding: 10px 0; border-radius: 3px; transition: background-color 0.3s;}
.mgT2BoxItem a > div .view.green { background-color: #23bf08;}
.mgT2BoxItem a > div .view.red { background-color: #bf0808;}
.mgT2BoxItem a > div .view.blue { background-color: #0851bf;}
.mgT2BoxItem a > div .view.orange { background-color: #ff6600;}
.mgT2BoxItem a > div .view.purple { background-color: #8b08bf;}
.mgT2BoxItem a > div .view.gray { background-color: #8a8a8a;}
.mgT2BoxItem a:hover > div .view.green { background-color: #1a8e06;}
.mgT2BoxItem a:hover > div .view.red { background-color: #8e0606;}
.mgT2BoxItem a:hover > div .view.blue { background-color: #063c8e;}
.mgT2BoxItem a:hover > div .view.orange { background-color: #db600e;}
.mgT2BoxItem a:hover > div .view.purple { background-color: #8e0687;}
.mgT2BoxItem a:hover > div .view.gray { background-color: #6d6d6d;}

.mgT2Pop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; background-color: white; display: none; align-items: start; justify-content: center; overflow-y: auto;}
.mgT2PopBox { position: relative; background-color: white; width: 100%; height: 100%; display: flex; align-items: stretch; justify-content: stretch;}
.mgT2PopBox .close { position: absolute; right: 8px; top: 8px; z-index: 100001;}
.mgT2PopBox .close i { display: flex; align-items: center; justify-content: center; font-size: 36px; color: #5c5351; text-align: center; width: 33px; height: 36px; background-color: white; border-radius: 50%; box-shadow: 0 0 0 1px #eeeeee; padding-right: 3px;}

.mgT2PopBoxFlex { display: flex; flex-direction: column;}
.mgT2PopBoxFlex .header { display: block; flex-shrink: 0;}
.mgT2PopBoxFlex .photos { position: relative; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden;}
.mgT2PopBoxFlex .photos > img { display: block; width: 100%; max-height: 40vh; object-fit: cover; object-position: center;}
.mgT2PopBoxFlex .nameBox { display: flex; align-items: center; color: #424455; padding: 8px 0; margin-bottom: 8px; padding: 12px 16px 0 16px;}
.mgT2PopBoxFlex .nameBox .avatar { width: 50px; margin-right: 8px;}
.mgT2PopBoxFlex .nameBox .avatar img { width: 50px; height: 50px; object-fit: cover; object-position: center; border-radius: 50%;}
.mgT2PopBoxFlex .nameBox .nameage { width: 36%;}
.mgT2PopBoxFlex .nameBox .name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 19px; margin-bottom: 4px;}
.mgT2PopBoxFlex .nameBox .name strong { width: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mgT2PopBoxFlex .nameBox .cityonline { margin-left: auto;}
.mgT2PopBoxFlex .nameBox .age { font-size: 0.85rem; color: #888996;}
.mgT2PopBoxFlex .nameBox .icons { display: flex; align-items: center; justify-content: right; gap: 8px; margin-bottom: 8px;}
.mgT2PopBoxFlex .nameBox .icons .text { font-size: 12px;}
.mgT2PopBoxFlex .nameBox .city { font-size: 0.85rem; color: #888996; text-align: right;}
.mgT2PopBoxFlex .about { font-size: 13px; color: #3f3f3f; line-height: 1.2rem; margin-bottom: 8px; flex-grow: 1; max-height: calc(100% - 360px); overflow-y: auto; padding: 0 16px;}
.mgT2PopBoxFlex .about .terms { display: none; font-size: 11px; color: #bebebe; font-weight: 300; padding-top: 16px;}
.mgT2PopBoxFlex .about .terms a { color: #9e9e9e; text-decoration: none !important;}
.mgT2PopBoxFlex .about p { margin: 0; margin-bottom: 16px;}
.mgT2PopBoxFlex .about p:last-child { margin-bottom: 0;}
.mgT2PopBoxFlex .send { margin-top: auto; flex-shrink: 0; padding: 16px 0 0 0;}
.mgT2PopBoxFlex .send .cinfo { display: none;}
.mgT2PopBoxFlex .send .sendbtn { display: block; color: white; text-align: center; padding: 12px 24px; border-radius: 5px; cursor: pointer; text-decoration: none !important; margin: 0 16px 16px 16px; transition: background-color 0.3s;}
.mgT2PopBoxFlex .send .sendbtn.green { background-color: #23bf08;}
.mgT2PopBoxFlex .send .sendbtn.red { background-color: #bf0808;}
.mgT2PopBoxFlex .send .sendbtn.blue { background-color: #0851bf;}
.mgT2PopBoxFlex .send .sendbtn.orange { background-color: #ff6600;}
.mgT2PopBoxFlex .send .sendbtn.purple { background-color: #8b08bf;}
.mgT2PopBoxFlex .send .sendbtn.gray { background-color: #8a8a8a;}
.mgT2PopBoxFlex .send .sendbtn.green:hover { background-color: #1a8e06;}
.mgT2PopBoxFlex .send .sendbtn.red:hover { background-color: #8e0606;}
.mgT2PopBoxFlex .send .sendbtn.blue:hover { background-color: #063c8e;}
.mgT2PopBoxFlex .send .sendbtn.orange:hover { background-color: #db600e;}
.mgT2PopBoxFlex .send .sendbtn.purple:hover { background-color: #8e0687;}
.mgT2PopBoxFlex .send .sendbtn.gray:hover { background-color: #6d6d6d;}

@media (min-width: 768px) {

    .mgT2Box { grid-template-columns: repeat(3, minmax(0, 1fr));}
    .mgT2Pop { background-color: #000000bb;}
    .mgT2PopBox { width: 380px; margin-top: 6vh; max-height: 88vh; border-radius: 5px;}
    .mgT2PopBox .close { right: -12px; top: -12px;}
    .mgT2PopBoxFlex .about { max-height: calc(100vh - 360px);}
}

@media (min-width: 992px) {

    .mgT2Box { grid-template-columns: repeat(4, minmax(0, 1fr));}
    .mgT2PopBox { width: 420px; margin-top: 8vh; max-height: 84vh; border-radius: 5px;}
}