@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap');


html, body {
    font-family      :'Poppins', sans-serif;
    position         : relative;
    margin           : 0;
    padding          : 0;
    max-height       : 100%;
    max-width        : 100%;   
    overflow-x       : hidden;
    overflow         : hidden;
    background-color : #F8F9FA;
    color            : #070605;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.loader {
    overflow   : hidden;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    z-index    : 3;
}
    
.loader_inner {
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
}
    
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
    
.container {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.setting {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.withdraw {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.log {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.sakla {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.commission {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.downline {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.downline-list {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.downline-viewer {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    box-shadow : rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
    
.navbar {
    overflow         : hidden;
    background-color : transparent;
    position         : fixed;
    top              : 0;
    width            : 100%;
    z-index          : 1;
}

.navbar-background {
    background              : rgba(237, 28, 36, 0.69);
    box-shadow              : 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter         : blur(5.4px);
    -webkit-backdrop-filter : blur(5.4px);
}

.navbar-bottom-providers {
    overflow                : hidden;
    position                : fixed;
    bottom                  : -135;
    width                   : 100%;
    border-radius           : 25px; 
    height                  : 200px;
    background              : rgba(237, 28, 36, 0.69);
    box-shadow              : 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter         : blur(5.4px);
    -webkit-backdrop-filter : blur(5.4px);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* .footer {
    position                : absolute; 
    bottom                  : 0px; 
    left                    : 0px; 
    right                   : 0px;
    height                  : auto; 
    max-width               : 411;
    color                   : #A4A4A5;
    background              : rgba(248, 249, 250, 0.69);
    box-shadow              : 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter         : blur(5.4px);
    -webkit-backdrop-filter : blur(5.4px);
    border-radius           : 20px 20px 0px 0px;
    border                  : 1px solid #F8F9FA;
    z-index                 : 9999;
    display                 : none;
    overflow                : hidden;
}

.footer-active {
    color : #ED1C24;
} */

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
  
.row { display : flex; }
.column { flex : auto; }
.column10 { flex : 10%; }
.column20 { flex : 20%; }
.column30 { flex : 30%; }
.column35 { flex : 35%; }
.column40 { flex : 40%; }
.column50 { flex : 50%; }
.column60 { flex : 60%; }
.column65 { flex : 65%; }
.column70 { flex : 70%; }
.column80 { flex : 80%; }
.column90 { flex : 90%; }

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.underline {
    text-decoration: underline;
}

.selected-provider{
    background-color:#D73036;
}

.gradient {
    position         : absolute;
    height           : 350px;
    top              : 0;
    background-color : #F8F9FA;
    background-image : linear-gradient(#ED1C24, #F8F9FA);
    z-index          : 0;
}

.noScroll {
    -ms-overflow-style : none;  
    scrollbar-width    : none; 
}

.noScroll::-webkit-scrollbar {
    display : none;
}

.imageShadow {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.24);
}

.imageProvider {
    font-size               : 8px; 
    color                   :#F8F9FA;         
    background              : rgba(50, 50, 50, 0.62);
    box-shadow              : 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter         : blur(8.8px);
    -webkit-backdrop-filter : blur(8.8px); border-radius: 0px 5px 0px 5px; 
    padding                 : 2px; 
    right                   : 0; 
    position                : absolute;
}

.div-shadow {
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

.banner {
	animation-name: fade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 0.2s;
	animation-direction: alternate;
}

@keyframes fade {
	0%   { opacity: 1; }
	25%  { opacity: 1; }
	75%  { opacity: 0; }
	100% { opacity: 0; }
}

.vertical-center7 {
    margin        : 0;
    position      : absolute;
    top           : 7%;
    -ms-transform : translateY(-7%);
    transform     : translateY(-7%);
}

.vertical-center15 {
    margin        : 0;
    position      : absolute;
    top           : 15%;
    -ms-transform : translateY(-15%);
    transform     : translateY(-15%);
}


.blur {
    filter:blur(1px);
}

.textBox {
    border-radius    : 8px;
    font-family      :'Poppins', sans-serif;
    background-color : #F9FAFB;
    color            : #323232;
    border           : #F9FAFB;
}

.clickInset {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.noClick {
    pointer-events : none;
    filter         : grayscale(30%);
	color          : gray; 
}

.noClick100 {
    pointer-events : none;
    filter         : grayscale(100%);
	color          : gray; 
}

.grey-out {
    filter : grayscale(100%);
	color  : gray; 
}

.noClickX {
    pointer-events : none;
}

.rotate {
    animation: animName 2s linear infinite;
}

@keyframes animName {
      0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}

/* ///////////////////////////////////////////////////////////////// */

/* SAKLA */

.blink-winner { 
    animation: blink 1s ease-in infinite; 
} 

.noClick-winner {
    pointer-events : none;
}

@keyframes blink { 
  
    0%   { opacity: 0; }
    50%  { opacity: 1; } 
    100% { opacity: 0; }
    
}

.saklaFloating {
    height                  : 20px;
    width                   : 100%;
    overflow                : hidden;
    color                   : #F8F9FA;         
    background              : rgba(50, 50, 50, 0.62);
    box-shadow              : 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter         : blur(8.8px);
    -webkit-backdrop-filter : blur(8.8px); border-radius: 0px 0px 0px 0px; 
    padding                 : 4px; 
    top:0;
    position                : absolute;
}

.saklaFloating-c {
    height                  : 40px;
    width                   : 100%;
    overflow                : hidden;
    color                   : #F8F9FA;         
    background              : rgba(50, 50, 50, 0.62);
    box-shadow              : 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter         : blur(8.8px);
    -webkit-backdrop-filter : blur(8.8px); border-radius: 0px 0px 0px 0px; 
    padding                 : 4px; 
}

.saklaFloating-bl {
    font-size               : 10px; 
    color                   :#F8F9FA;         
    background              : rgba(50, 50, 50, 0.62);
    box-shadow              : 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter         : blur(8.8px);
    -webkit-backdrop-filter : blur(8.8px); border-radius: 0px 5px 0px 5px; 
    padding                 : 4px; 
    bottom                  : 0; 
    position                : absolute;
}