@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;900&display=swap');
@import url(https://fonts.googleapis.com/css?family=Electrolize);

body { font-family: 'Montserrat', sans-serif; }

/* Global */
.fw-5 { font-weight: 500; }
.fw-7 { font-weight: 700; }
.fw-8 { font-weight: 800; }
.ls-1 { letter-spacing: 1px; }
.bg-orange { background: #ec7d29; }
.bg-green { background: #065947; }
.bg-yellow { background: #ffd200; }
.btn-green { background-color: #065947; border: 1px solid #065947; }
.btn-green:hover { background-color: #E45A29; border: 1px solid #E45A29; }
.btn-light-green { background: #93e85b; }
.text-orange,
.text-orange:hover { color: #E45A29 !important; }
.text-green,
.text-green:hover { color: #065947 !important; }
.text-yellow, 
.text-yellow:hover { color: #f5a329; }
.text-yellow-2, 
.text-yellow-2:hover { color: #fff600; }
.text-light-green,
.text-light-green:hover { color: #bcd227; }

i.view-password { top: 37px; right: 10px; cursor: pointer; color: #6c757d; }
i.view-password-2 { top: 37px; right: 25px; cursor: pointer; color: #6c757d; }
input:focus, 
select:focus { box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 25%)!important; }
button:focus { box-shadow: none!important; }
main { min-height: 500px; }
.swal-footer { text-align: center; }
.swal-button { background-color: #f5a329; color: #065947; }
.swal-text { font-size: 18px; color: #000000; }
.btn-yellow { background: #f5a329; }

/* Navbar */
.navbar { background: url(../../img/bg-nav.png); background-position: center; background-repeat: repeat-x; }            
.navbar .navbar-nav .nav-item { border-right: 1px solid #aaaaaa; }
.navbar .navbar-nav .nav-item:last-child { border: 0px; }
.navbar .navbar-nav .nav-item .nav-link { margin: 0 1rem; color: #065947; }
.navbar .navbar-toggler.icon { background-color: transparent; position: relative; cursor: pointer; height: 34px; width: 34px; padding: 0; border: 0; }
.navbar .navbar-toggler.icon span { display: block; position: absolute; left: 0; width: 34px; height: 4px; border-radius: 5px; -webkit-transition: -webkit-transform 0.3s; -webkit-transition: all 300ms ease-in-out;  transition: all 300ms ease-in-out; }
.navbar .navbar-toggler.icon span:first-child { top: 5px; }
.navbar .navbar-toggler.icon span:nth-child(2) { top: 15px; }
.navbar .navbar-toggler.icon span:last-child { top: 25px; }

.registre-se-login { width: 25%; background: #065947; }
.registre-se-login:last-of-type { z-index: -1; }

#champion-menu { background-color: rgba(6, 89, 71, .8); }
#champion-menu .ms-5 { background: url(../../img/bg-menu.png); background-size: cover; }
#champion-menu .ms-5 .shadow { background-color: rgba(6, 89, 71, .7); }

@media(max-width: 1199.98px) {
    .navbar .navbar-nav .nav-item .nav-link { margin: 0 .5rem; }
}

@media(max-width: 991.98px) {
    .navbar .navbar-collapse { position: fixed; top: 0px; bottom: 0; left: 100%; width: 100%; padding-top: .5em; overflow-y: auto; visibility: hidden; transition: .2s ease-in-out, -webkit-transform .2s ease-in-out; z-index: 9; }
    .navbar .navbar-collapse.show { visibility: visible; transform: translateX(-100%); }
    .navbar .navbar-collapse .navbar-nav { padding-top: var(--bs-gutter-y,.75rem); padding-left: var(--bs-gutter-x,.75rem); padding-right: var(--bs-gutter-x,.75rem); }
    .navbar .navbar-nav .nav-item { border-right: 0px; }
    .navbar .navbar-nav .nav-item .nav-link { margin: .5rem 0; color: #FFFFFF; }
    .navbar-brand { width: 40%; }
    .registre-se-login { width: 55%; }
}

/* Painel LED */
#led { width: 100%; }
#led table,
#led canvas { width: 100%; height: 40px; padding: 0; border-spacing: 0; border-collapse: collapse; background-color: #000; }
#led td { padding: 0; border-spacing: 0; border-collapse: collapse; border: 1px solid hsla(0,0%,20%,1); }
#led td.off { background: hsla(0,0%,7%,1); }

/* Banners */
.carousel-indicators button { width: 15px !important; height: 15px !important; background-color: #065947 !important; }
.carousel-indicators button.active { background-color: #f5a329 !important; }
.carousel-control-prev { left: -32px; }
.carousel-control-prev,
.carousel-control-prev:hover,
.carousel-control-next,
.carousel-control-next:hover { opacity: 1; }
.carousel-control-next { right: -32px; }
.carousel-control-prev span,
.carousel-control-next span { width: 4rem; height: 4rem; }

/* Bolões */
#sweepstakes { border: 2px solid #ec7d29; }
#sweepstakes h1 { border-bottom: 2px solid #ec7d29; }
#sweepstakes .card { background: #f4f4f4; }
#sweepstakes .card .date { transform: rotate(270deg); top: 120px; left: -118px; width: 250px; text-align: center; }

/* Telegram */
#telegram .card p { bottom: -60px; }
#telegram .card-desktop img { left: -40px; top: -40px; }                    
#telegram .card-desktop,
#telegram .card-mobile { background: url(../../img/bg-card-telegram.png); }
#telegram .card-mobile img { margin-left: -40px; margin-top: -110px; }

/* Seja um Afiliado */
footer { background: url(../../img/bg-footer.png); background-position: center bottom; background-repeat: repeat-x; }
footer #affiliate { margin-top: -20px; }
footer #affiliate #left { background: url(../../img/bg-left-affiliate.png); background-repeat: no-repeat; background-position: left bottom; }
footer #affiliate #left img { position: absolute; bottom: -15px; left: 0px; z-index: 3; height: 300px; }
footer #affiliate #center { background: url(../../img/bg-affiliate.png); background-position: bottom; background-repeat: repeat-x; }
footer #affiliate #center legend { line-height: 1.2; letter-spacing: -1px; }
footer #affiliate #right { background: url(../../img/bg-right-affiliate.png); background-repeat: no-repeat; background-position: right bottom; }
footer #affiliate #right img { position: absolute; z-index: 1; top: -30px; right: 0px; height: 366px; }

@media (min-width: 768px) {
    footer #affiliate::before { content: ""; width: 182px; height: 20px; position: absolute; background: url(../../img/bg-left-affiliate.png); background-position: top left; background-color: #FFF; }                
    footer #affiliate::after { content: ""; width: 182px; height: 20px; position: absolute; right: 12px; background: url(../../img/bg-right-affiliate.png); background-position: top right; background-color: #FFF; }    
}

@media (max-width: 1199.98px) {
    footer #affiliate #left img,
    footer #affiliate #right img { height: 260px; }
}

@media (max-width: 991.98px) {
    footer #affiliate #left img,
    footer #affiliate #right img { height: 215px; }
}

@media (max-width: 767.98px) { 
    footer #affiliate #left img,
    footer #affiliate #right img { height: 115px; }    
}

@media (max-width: 575.98px) {
    footer #affiliate #left img,
    footer #affiliate #right img { height: 85px; }
    footer #affiliate #right img { top: 0px; right: 0px; }
}

@media (max-width: 400.98px) {
    footer #affiliate #center legend { font-size: 1.28rem; }
}

@media (max-width: 375.98px) {        
    footer #affiliate #center legend { font-size: 1.15rem; line-height: 1.4; }
    footer #affiliate #left img,
    footer #affiliate #right img { height: 70px; }                
    footer #affiliate #right img { right: 0px; }
}

/* DATATABLES */
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child .dtr-title { display: none !important; }
table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom: 0px !important; }
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control { padding-left: 30px !important; }
table.dataTable { width: 100% !important; }
table.dataTable.no-footer { border-bottom: 1px solid #dee2e6 !important; }
table.dataTable thead { background-color: #065947; color: #FFF; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled { background: transparent; padding: 10px 10px !important; border-bottom: 1px solid #065947 !important; }
table.dataTable thead th, 
table.dataTable thead td { padding: 10px 10px !important; border-bottom: 1px solid #065947 !important; }
table.dataTable tbody th,
table.dataTable tbody td { padding: 8px 10px !important; }
table.dataTables_length { float: left; }
table.dataTables_filter label { margin-right: 5px; }

/* Rodapé */
footer hr { width: 1px; right: 25px; opacity: 1; }
@media (max-width: 767.98px) {

    footer img#logo-footer { width: 160px; }
}