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

/* background color   : #16191D */
/* font color primary : #726dad */
/* font color 1       : #efa721 */
/* font color 2       : #eaecf6 */

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 : #2B2E31;
    filter           : brightness(100%);
}

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

.text-box {
    border-radius    : 8px;
    font-family      :'Poppins', sans-serif;
    color            : #B9BABB;
    border           : #606266;
}

.text-box::placeholder { 
    vertical-align: middle;
    font-size: 10px;
}

.text-box:focus{
    outline: none;
}

.text-area {
    border-radius : 8px;
    font-family   :'Poppins', sans-serif;
    color         : #B9BABB;
    border        : #606266;
    resize        : none;
}

.text-area:focus{
    outline: none;
}

.input-with-icon {
    position: relative;
}

.input-with-icon .icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.input-with-icon .icon2 {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.glass-background {
    background              : rgba(28, 31, 36, 0.9);
    box-shadow              : 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter         : blur(9.5px);
    -webkit-backdrop-filter : blur(9.5px);
    border                  : 1px solid rgba(28, 31, 36, 1);
}

.glass-background2 {
    background: rgba(119, 121, 124, 0.04);
    backdrop-filter: blur(9.6px);
    -webkit-backdrop-filter: blur(9.6px);
}

.glass-background3 {
    background: rgba(69, 71, 74, 0.21);
    backdrop-filter: blur(11.3px);
    -webkit-backdrop-filter: blur(11.3px);
}

.glass-background4 {
    background: rgba(69, 71, 74, 0.6);
    backdrop-filter: blur(11.3px);
    -webkit-backdrop-filter: blur(11.3px);
}

.font-color-primary {
    color:#606266;
}

.font-color-1 {
    color:#efa721;
    text-shadow: rgba(255,162,0,0.8) 0px 0px 4px;
}

.font-color-2 {
    color:#ffffff;
}

.font-green {
    color: #48A14D;
}

.font-red {
    color: #B33F40;
}

.font-orange {
    color: #ED944D;
}

.color-bottom-menu {
    color:#efa721;
}

.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%; }

.center-div {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
}

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

.glass-color1-bg {
    background              : rgba(250, 229, 188, 0.19);
    border-radius           : 16px;
    box-shadow              : 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter         : blur(9.5px);
    -webkit-backdrop-filter : blur(9.5px); 
}

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

.sticky-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.sticky-container2 {
    z-index  : 3;
    position : -webkit-sticky;
    position : sticky;
    bottom   : 0;
}

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

.no-click {
    pointer-events : none;
}

.no-click-80 {
    pointer-events : none;
    filter         : grayscale(80%);
	color          : gray; 
}

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

.transaction-selected {
    color  : #f0a623; 
    border : 1px solid #f0a623;
}

.transaction-not-selected {
    color  : #606266; 
    border : 1px solid #606266;
}

table, th, td{
    border: 1px solid #3A3B3D;
    padding:5px;
    text-align:center;
    table-layout: fixed;
    border-collapse: collapse;
}

.image-provider {
    font-size               : 7px; 
    font-weight             : bold;
    color                   :#B9BABB;         
    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;
}

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

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

/* LOADER */

.loader {
    overflow   : hidden;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    z-index    : 3;
    width:360px; 
    height:640px;
}

.loader_inner {
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
}

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

/* DIV BODY */

.container {
    overflow   : auto;
    display    : none;
    margin     : 0;
    position   : absolute; 
    top        : 50%; 
    left       : 50%; 
    transform  : translate(-50%, -50%);
    z-index    : 2;
}

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

/* ANIMATION */

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

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

.fade-in {
    animation: 0.5s ease 0s 1 normal both running fade-in-animation;
}

@keyframes fade-in-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.bounce-in {
    animation: 0.8s ease 0s 1 normal both running bounce-in-animation;
}

@keyframes bounce-in-animation {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.dimmed { animation: 0.5s ease 0s 1 normal both running dimmed-animation; }

@keyframes dimmed-animation {
    
      0% { filter : brightness(100%); }

    100% { filter : brightness(50%); }

}

.dimmed-removed { animation: 0.5s ease 0s 1 normal both running dimmed-removed-animation; }

@keyframes dimmed-removed-animation {
    
      0% { filter : brightness(50%); }

    100% { filter : brightness(100%); }

}

.fade-in-up { animation: 0.5s ease 0s 1 normal both running fade-in-up-animation; }

@keyframes fade-in-up-animation {

    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
    
}

.fade-out-down {
    animation: 0.5s ease 0s 1 normal both running fade-out-down-animation;
}

@keyframes fade-out-down-animation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.font-glow {
    animation: font-glow-animation 2s infinite;
}

@keyframes font-glow-animation {
      0% { filter: brightness(50%);  }
     10% { filter: brightness(90%); }
     20% { filter: brightness(50%);  }
     30% { filter: brightness(90%); }
     40% { filter: brightness(70%);  }
     50% { filter: brightness(90%); }
     60% { filter: brightness(70%);  }
     70% { filter: brightness(90%); }
     80% { filter: brightness(50%);  }
     90% { filter: brightness(120%); }
    100% { filter: brightness(100%); }
}

.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; }
}

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


/* RANDOM CSS

vertical-align: middle; */

.firefly {
    width:4px;
    height:4px;
    position:absolute;
    background-color: #efa721;
    box-shadow:0px 0px 17px 2px #fdeeb8;
    border-radius: 50%;
    z-index:-1;
}