@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Francois+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amaranth&display=swap');

:root {
    font-family: Arial, Helvetica, sans-serif;
    --mainColor: #FD4138;
}

nrose {
    width: 100%;
    position: absolute;
    overflow: hidden;
    height: 100vh;
}

nrose .left {
    width: 30px;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}

nrose .right {
    width: 30px;
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
}

nrose .top {
    height: 30px;
    z-index: -1;
    position: absolute;
    top: 0;
}

nrose .bottom {
    height: 30px;
    z-index: 1;
    position: absolute;
    bottom: 0px;
}

body {
    margin: auto;
    max-width: 690px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    background-color: #ffc5e0;
}

a {
    text-decoration: none;
}
.header-logos {
    overflow: auto;
    height: 60px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    scrollbar-width: none;
   
}
.header-logos .right {
    width: 90px;
    
    position: fixed;
    top: 10px;
    right:0;
}
.header-logos .left {
    width: 160px;
    position: fixed;
    top: 28px;
    left:4%;
}

.container {
    overflow: auto;
    height: calc(100vh - 80px);
    display: block;
    width: calc(100% - 20px);
    scrollbar-width: none;
    box-sizing: border-box;
    margin-top: 70px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.container .img-container {
   display: flex;
   justify-content: center;
   align-items: center;
    
} 
.container .img-container img.center {
    width: 230px;
}
.container-main {
    padding: 0px;
    border: 1px solid #ffc5e0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    
}

.btn-isntall {
    background-color: #ffc5e0;
    width: 100%;
    padding: 10px;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px;
    font-size: large;
   
}
.btn-close {
    background-color: #ffc5e0;
    border: 1px;
    border-radius: 10px;
    margin-bottom: 15px;
    color: white;
    font-size: medium;
    padding: 10px;
}


.container-logo {
    border-bottom: 1px solid #ffc5e0;
    padding: 10px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    font-size: 1.2rem;
    font-weight: bold;
}
.content-secundary {
    padding: 10px;
    
    font-size: small;
    width: fit-content;
}
.content-secundary ul {
    padding: 5px;
    list-style-type: none;
}
.bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}
.text-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px 10px;
    padding: 0;
}
.text-subtitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 20px;
    padding: 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 100;
}
h2 {
    /*font-family: 'Rowdies', cursive;*/
    margin: 0;
    text-transform: uppercase;
    font-size: 25px;
    display: block;
    text-align: center;
    color: #000000;
   
}

.h-cnt {
    font-family: 'Amaranth', sans-serif;
    text-align: center;
    text-transform: uppercase;
    color: #FD4138;
    font-size: 16px;
}
.actions {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
.action-tiktok {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2.5rem;
}
a.btn {
    display: block;
    width: 80%;
    text-align: center;
    color: #000000;
    background: #ffffff;
    margin: 6px;
    padding: 5px 10px;
    font-weight: 600;
    box-shadow: 2px 2px 2px  #8c8686;
    text-transform: uppercase;
    font-size: 20px;
}

.king {
    width: 60px;
    margin: auto;
    display: block;
}

.tiktok {
    margin: auto;
    width: 150px;
    background: #111113;
    margin-top: 10px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 1px 2px 5px black;
}

.message-container {
    display: none;
    position: fixed;
    background: #fff;
    height: calc(100vh - 60px);
    max-width: 630px;
    width: calc(100% - 60px);
    top: 30px;
    margin-left: 30px;

}

.message-container .header {
    display: flex;
    align-items: center;
    column-gap: 20px;
    padding: 0 10px;
    background: white;
    height: 50px;
}

.message-container .header .title {
    /*text-align: center;
    width: calc(100% - 55px);*/
    color: var(--mainColor);
}

button.back {
    border: 1px solid #FD413830;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    border-radius: 10px;
    cursor: pointer;
    background: #FD41380A;
    color: var(--mainColor);
}

button.back:hover,
button.back:focus {
    background: #FD413817;
    border: 1px solid #FD413866;
}

#singleMsg {
    display: none;
}

.content {
    padding: 20px 10px;
    height: calc(100vh - 160px);
    overflow-y: auto;
}

#singleMsg.content {
    padding: 20px;
}

.content ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.content ul li {
    display: flex;
    align-items: center;
    column-gap: 15px;
    background: #eee0;
    border-radius: 15px;
    padding: 10px 10px;
    box-shadow: 0px 2px 5px #55555538;
    border: 1px solid #0000000f;
    margin-bottom: 15px;
}

.item-logo {
    width: 100%;
    max-width: 60px;
    display: none;
}


.msg-title,
p {
    padding: 0;
    margin: 0;
}

.msg-title {
    margin-bottom: 5px;
    color: #333;
}

.short-desc {
    color: #555;
    font-size: 14px;
    margin-bottom: 5px;
}

.msg-link {
    font-size: 15px;
}

.show {
    display: block;
    animation-name: show;
    animation-duration: 0.3s;
}

@keyframes show {
    0% {
        transform: translateY(100vh);
    }

    100% {
        transform: translateY(0vh);
    }
}

.hide {
    display: block;
    animation-name: hide;
    animation-duration: 0.3s;
}

@keyframes hide {
    0% {
        transform: translateY(0vh);
    }

    100% {
        transform: translateY(100vh);
    }
}

.loading {
    height: 90%;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.loading img {
    width: 150px;
    height: 150px;
}

.msg-img {
    max-width: 100%;
    border-radius: 15px;
}

.msg-body {
    text-align: justify;
    background: #fff;
    border: 1px solid #00000024;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 0 5px #00000040;
    margin: 15px 0;
}

.msg-body p {
    color: #333;
    font-size: 15px;
}

.msgLoading {
    position: absolute;
    right: -25px;
    top: -25px;
    display: none;
}

.msgLoading img {
    width: 100px;
}

.msg-link-btn-1,
.msg-link-btn-2 {
    display: inline-block;
    width: max-content;
    margin: 15px 5px 5px 0;
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
}

.msg-link-btn-1 {
    border: 1px solid transparent;
    color: #fff;
    background: linear-gradient(#fd4138, #e1251c);
}

.msg-link-btn-2 {
    color: var(--mainColor);
    border: 1px solid var(--mainColor);
}