#root > div {
    padding: 20px;
}
#root > div > div:nth-child(2) > div:first-child , #root > div > div:nth-child(3) > div:first-child , #root > div > div:nth-child(1) > div:first-child > div:first-child{
    font-size: 20px
}
#root > div > div:nth-child(2) > div > button , #root > div > div:nth-child(2) > div , #root > div > div:nth-child(3) > div > button , #root > div > div:nth-child(3) > div , #root > div > div:nth-child(1) > div:first-child > div {
    color: #fff;
    font-weight: 500;;
    font-size: 16px;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    font-family: "Poppins";
    gap:10px;
    flex-wrap: wrap;
}
#root > div > div:nth-child(2) > div , #root > div > div:nth-child(3) > div , #root > div > div:nth-child(1) > div:first-child > div:first-child {
    margin: 20px 0;
}
#root > div > div:nth-child(1) > div:first-child {
    display: flex;
    justify-content: space-between;
}
#root > div > div:nth-child(2) > div > i , #root > div > div:nth-child(3) > div > i , #root > div > div:nth-child(1) > div:first-child > div > i{
    color: rgb(4 213 119);
}
#root > div > div:nth-child(2) > div:last-child > button , #root > div > div:nth-child(2) > div:last-child > div ,  #root > div > div:nth-child(3) > div:last-child > button , #root > div > div:nth-child(3) > div:last-child > div{
    border: none;
    background-color: unset;
    cursor: pointer;
    width: 100%;
    height: 100px;
    min-width: 150px;
    max-width: 250px;
    position: relative;
    transition: all 0.5s ease;
    border-radius: 0.8rem !important;
    background: #1d272e;
}
#root > div > div:nth-child(2) > div:last-child > button > .lock , #root > div > div:nth-child(2) > div:last-child > div > .lock , #root > div > div:nth-child(3) > div:last-child > button > .lock , #root > div > div:nth-child(3) > div:last-child > div > .lock{
    border: none;
    cursor: pointer;
    width: 100%;
    min-width: 150px;
    max-width: 250px;
    position: absolute;
    background: rgba(18, 27, 35, 0.76);
    height: 100px;
    display: flex;
    gap: 5px;
    align-items: center;
    border-radius: 0.8rem !important;
    backdrop-filter: blur(0.5px);
    justify-content: center;
    color: rgb(8, 211, 120);
    z-index: 99;
    border-radius: 0;
    font-weight: bold;
    font-size: 13px;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall , #root > div > div:nth-child(2) > div:last-child > div > .wall , #root > div > div:nth-child(3) > div:last-child > button > .wall , #root > div > div:nth-child(3) > div:last-child > div > .wall {
    border-radius: 0.8rem !important;
    width: 100%;
    padding: 8px;
    height: 100px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 3px solid transparent;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall:hover , #root > div > div:nth-child(2) > div:last-child > div > .wall:hover , #root > div > div:nth-child(3) > div:last-child > button > .wall:hover , #root > div > div:nth-child(3) > div:last-child > div > .wall:hover {
    border: 3px solid #04d577;
    transition: all 0.5s ease;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:first-child , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:first-child , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:first-child , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:first-child  {
    display: flex;
    justify-content: space-between;
    gap: 10px;  
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:first-child > div , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:first-child > div , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:first-child > div , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:first-child > div {
    display: flex;
    flex-direction: column;
}
#root > div > div/:nth-child(2) > div:last-child > button > .wall > div:first-child > div > div > span:first-child , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:first-child > div > div > span:first-child , #root > div > div/:nth-child(3) > div:last-child > button > .wall > div:first-child > div > div > span:first-child , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:first-child > div > div > span:first-child{
    font-size: 12px;
    color: #dfdfe9;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:first-child > div > div > span:last-child , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:first-child > div > div > span:last-child , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:first-child > div > div > span:last-child , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:first-child > div > div > span:last-child{
    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-align: start;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:first-child> div , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:first-child> div , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:first-child> div , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:first-child> div  {
    display: flex;
    flex-direction: row;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:first-child> div > img , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:first-child> div > img , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:first-child> div > img , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:first-child> div > img {
    height: 55px;
    width: 55px;
    border-radius: 12px;
    margin-right: 8px;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:first-child> div > div , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:first-child> div > div , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:first-child> div > div , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:first-child> div > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:first-child > span , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:first-child > span , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:first-child > span , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:first-child > span {
    font-size: 12px;
    background: #b36717d1;
    color: #ffa700 !important;
    padding: 0px 7px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    height: 20px;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:last-child , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:last-child , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:last-child , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:last-child {
    display: flex;
    justify-content: space-between;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:last-child > div , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:last-child > div , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:last-child > div , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:last-child > div {
    display: flex;
    align-items: center;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:last-child > div:first-child , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:last-child > div:first-child , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:last-child > div:first-child , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:last-child > div:first-child{
    background: #2223396b;  
    padding: 0px 5px;
    border-radius: 19px;
    font-size: 11px;
    border: solid 1px #ffffff1a;
    color: #ccd2da;
}
#root > div > div:nth-child(2) > div:last-child > button > .wall > div:last-child > div:last-child , #root > div > div:nth-child(2) > div:last-child > div > .wall > div:last-child > div:last-child , #root > div > div:nth-child(3) > div:last-child > button > .wall > div:last-child > div:last-child , #root > div > div:nth-child(3) > div:last-child > div > .wall > div:last-child > div:last-child  {
    color: #fbb346;
}

.modal {
    position: fixed;
    top: calc(50% - 800px / 2);
    left: calc(50% - 1500px / 2);
    height: 800px;
    width: 1500px;
    transition: all .5s ease;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 1001;
}
@media screen and (max-width: 1700px) {
    .modal {
        width: 1000px;
        height: 600px;
        top: calc(50% - 600px / 2);
        left: calc(50% - 1000px / 2);
    }

}
@media screen and (max-width: 1000px) {
    .modal {
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 100%;
    }

}
.modal.slidebar-open {
    right: calc(50% - 625px);
    left: calc(50% - 625px);
}
.modal iframe {
    width: 100%;
    height: 100%;
    background-color: #304256;
}
.modal > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 13px;
    box-sizing: border-box;
    background-color: rgb(4 213 119);
    cursor: default;
}
.modal > div > div {
    display: flex;
    color: #ffffff;
    font-size: 17px;
    gap: 10px;
}
.modal svg {
    fill: white;
    cursor: pointer;
}

#wrapper {
    width: 100%;
    border-radius: 4px;
    margin: 10px 0;
}

#carousel {
    position: relative;
    display: flex;
    overflow: hidden;
    gap: 10px;
}

.square {
    cursor: pointer;
    height: 170px;
    background-color: #121b23;
    border-radius: 6px;
    transition: 100ms ease-in-out;
    padding: 6px;
    border: none;
}
.load-square {
    width: 106px;
    height: 170px;
    background: linear-gradient(90deg, #f1f1f11f 25%, #e1e1e126 50%, #f1f1f11c 75%);
    background-size: 200% 100%;
    animation: loading 2.5s infinite;
    transition: 100ms ease-in-out;
    border-radius: 6px;
    min-width: 106px;
}
.square > div:first-child {
    display: flex;
    gap: 5px;
    color: #bbbbbb;
    flex-direction: column;
}

.square > div:first-child > div:nth-child(1) > img ,  .square > div:first-child > div:nth-child(1){
    width: 94px;
    height: 94px;
    border-radius: 8px; 
}
.square > div:first-child > div:nth-child(1) > img {
    background-color: #1c2936;
}
.square > div:first-child > div:nth-child(1) {
    background: linear-gradient(90deg, #f1f1f11f 25%, #e1e1e126 50%, #f1f1f11c 75%);
    background-size: 200% 100%;
    animation: loading 2.5s infinite;
}
.square > div:first-child > div:nth-child(2) {
    font-size: 14px;
    color: #fff;
    display: flex;
    flex-direction: column;
    width: 94px;
    align-items: start;
    text-align: start;
}
.square > div:first-child > div:nth-child(2) > p:first-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    width: 100%;
}
.square > div:first-child > div:nth-child(2) > p:last-child {
    font-size: 11px;
    color: #ccd2da;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}
.square > div:first-child > div:nth-child(3) {
    width: 94px;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.square > div:first-child > div:nth-child(3) > div:first-child {
    border-radius: 6px;
    padding: 0 8px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    max-width: 50%;
    overflow: hidden;
    font-size: 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.square > div:first-child > div:nth-child(3) > div:first-child {
    background: #6758cc;
}
.square > div:first-child > div:nth-child(3) > div:first-child.game {
    background: #6ab786 !important;
}
.square > div:first-child > div:nth-child(3) > div:first-child.survey {
    background: #2c85cb !important;
}
.square > div:first-child > div:nth-child(3) > div:last-child {
    color: #fff;
    font-weight: 600;
}
.square:hover{
    background-color: #151f27;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.buttons > button {
    cursor: pointer;
    font-size: 20px;
    background-color: #19232d;
    color: #ccd2da;
    border: 1px solid #04d577;
    border-radius: 7px;
    padding: 4px;
    transition: 60ms ease-in-out;
}
.modalOffer {
    position: fixed;
    top: calc(50% - 500px / 2);
    left: calc(50% - 540px / 2);
    height: 500px;
    width: 540px;
    transition: all .5s ease;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    background-color: #121b23;
    border-radius: 12px;
    padding: 12px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 1001;
    gap: 20px;
    cursor: default;
}
.modalOffer > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.modalOffer > div:first-child > p {
    font-size: 18px;
    color: #ccd2da;
}
.modalOffer > div:first-child > svg {
    color: #ed1d49;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.modalOffer > div:first-child > svg:hover {
    color: #dfdfe9;
}
.modalOffer > div:nth-child(2) {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
}
.modalOffer > div:nth-child(2) > div:first-child > img{
    width: 100px;
    height: 100px;
    border-radius: 8px;
}
.modalOffer > div:nth-child(2) > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.modalOffer > div:nth-child(2) > div:last-child > div:first-child {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 18px;
    color: #04d577;
    font-family: "Poppins";
    letter-spacing: 2px;
    font-weight: 500;
}
.modalOffer > div:nth-child(2) > div:last-child > div:first-child > img {
    height: 20px;
    width: 20px;
}
.modalOffer > div:nth-child(2) > div:last-child > div:last-child {
    display: flex;
    align-items: center;
    gap: 5px;
}
.modalOffer > div:nth-child(2) > div:last-child > div:last-child > div {
    border-radius: 9999px;
    padding: 8px;
    background-color: #1c2936;
    color: #04d577;
    border: 1px solid #304256;
    font-size: 20px;
}
.modalOffer > hr {
    border: 1px solid #19232d;
    width: 100%;
}
.modalOffer > div:nth-child(4) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
    color: #b2c2c8;
}
.modalOffer > div:nth-child(4) > p {
    font-family: "Poppins";
    font-weight: 500;
}
.modalOffer > div:nth-child(4) > img {
    max-width: 100px;
    max-height: 50px;
    border-radius: 8px;
}
.modalOffer > div:nth-child(6) {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    overflow: scroll;
}
.modalOffer > div:nth-child(6) > div {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    color: #ccc;
    background-color: #1c2936;
    padding: 12px;
    text-align: start;
    border-radius: 8px;
}
.modalOffer > div:nth-child(6) > div > p {
    font-family: 'Inter';
}
.modalOffer > div:nth-child(6) > div > div{
    display: flex;
    align-items: center;
    gap: 5px;
    background: #2223396b;
    padding: 0px 5px;
    border-radius: 19px;
    font-size: 11px;
    border: solid 1px #ffffff1a;
    color: #ccd2da;
}

.modalOffer > div:nth-child(6) > div > div > img {
    width: 14px;
    height: 14px;
}
.modalOffer > a {
    width: 100%;
    text-decoration: none;
    color: #fff;
    background-color: #04d577;
    border-radius: 8px;
    padding: 12px;
}
.buttons > button:hover {
    border-color: #167148;
    color: #f4f4f4;
}
@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
@media screen and (max-width: 560px) {
    #root > div > div:nth-child(2) > div:last-child > button , #root > div > div:nth-child(2) > div:last-child > div , #root > div > div:nth-child(2) > div:last-child > div > .lock , #root > div > div:nth-child(3) > div:last-child > button > .wall , #root > div > div:nth-child(3) > div:last-child > div > .lock , #root > div > div:nth-child(3) > div:last-child > div, #root > div > div:nth-child(3) > div:last-child > button{
        max-width: unset;
    }
}
@media screen and (max-width: 550px) {
    .modalOffer {
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 100%;
    }
}