:root [theme=red] {
    --main-background: #690000;
    --number: #00ff00;
    --ative-header: #00ff00;
    --preco: #FF0000;
}
:root [theme=blue] {
    --main-background: #000069;
    --number: #00ff00;
    --ative-header: #00ff00;
    --preco: #0000FF;
}

body {
    background: rgb(0,0,0);
    background: linear-gradient(135deg, rgba(0,0,0,1) 60%, var(--main-background) 100%);
    /*background: linear-gradient(135deg, rgba(0,0,0,1) 60%, #000069 100%);*/
    background-attachment: fixed;
}
a {
    color: var(--number);
}

a>* {
    color: var(--number);
}
.row>* {
    padding-left: 0;
    padding-right: 0;
}
.iptv .row {
    margin-left: 0;
    margin-right: 0;
}
.section .row {
    margin-left: 0;
    margin-right: 0;
}
.header {
    padding: 20px;
    font-size: 2em;
    width: 100%;
    color: #FFF;
    font-weight: bold;
}

.whatsapp-header {
    color: #FFF;
}
.number {
    color: var(--number);
}

.ative-header {
    color: var(--ative-header);
}

.footer {
    padding: 20px;
    font-size: 2em;
    width: 100%;
    color: #FFF;
    font-weight: bold;
}

.termo-footer {
    color: #FFF;
    font-weight: 100;
    padding: 0 40px;
    margin: 40px 0;
}

.title {
    padding: 20px;
    background-color: rgba(100,100,100,0.4);
    font-size: 2em;
    width: 100%;
    color: #FFF;
    border-radius: 10px;
}

.iptv {
    padding: 10px 0 0 0;
}

.iptv .lista .img {
    float:left;
    padding: 10px 0;
    border-radius: 100%;
    margin-left: 10px;
    background-position: center center;
    background-repeat: no-repeat;
}

.iptv .lista .nome {
    float:left;
    text-align: left;
    color: #FFF;
}
.iptv .lista .nomeAdm {
    float:left;
    text-align: left;
    color: #FFF;
}
.iptv .lista .nomeAdm input{
    margin: 2px 0;
}

.iptv .lista .preco {
    color: var(--preco);
    font-weight: bold;
    font-size: 16px;
}
.fixCol {
    padding: 5px 0 20px 0;
}
#forms {
    margin: 10px 0;
}

.header i:hover:before {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    color: #fff !important;
}
.footer i:hover:before {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    color: #fff !important;
}

@media (min-width: 992px) {
    .iptv .lista .nomeAdm {
        text-align: left;
        margin: 0px 0 10px 20px;
        color: #FFF;
        font-size: 24px;
    }
    .iptv .lista .nome {
        text-align: left;
        margin: 35px 0 0 20px;
        color: #FFF;
        font-size: 24px;
    }
    .iptv .lista .img {
        width: 120px;
        height: 120px;
        background-size: 130px auto;
    }
    .iptv .lista .preco {
        font-size: 24px;
    }
    .termo-footer {
        font-size: 22px;
    }
}
@media (max-width: 992px) {
    .header {
        padding: 20px;
        font-size: 1em;
        width: 100%
    }
    .footer {
        padding: 20px;
        font-size: 1em;
        width: 100%
    }
    .title {
        padding: 20px;
        font-size: 1em;
        color: #FFF;
    }

    .iptv .lista .img img {
        width: 55px;
        height: auto;
    }
    .iptv .lista .img {
        width: 50px;
        height: 55px;
        background-size: 60px auto;
    }
    .iptv .lista .nomeAdm {
        text-align: left;
        margin: 6px 0 0 10px;
        color: #FFF;
    }
    .iptv .lista .nome {
        text-align: left;
        margin: 16px 0 0 10px;
        color: #FFF;
    }
    .iptv .lista .preco {
        font-size: 17px;
    }
}